5 Divi ile yapılan editoryal stil bölümünün düzeni örnekleri
Yeni Divi seçeneği birçok olasılık sunuyor. Modüller, satırlar ve sütunlar, eskisinden daha fazla, şaşırtıcı ve kullanıcı dostu web tasarımına giden yolda birbirlerini güçlendirin. Yapılabilecek şeylerden biri olağanüstü bir editoryal kuvvet parçası yapmaktır. Ve bu yazıda size göstereceğiz; Farklı web sitelerinde kullanabileceğiniz farklı editoryal kuvvet parçalarının 5 düzeni. En iyi kısım? Mesajlar, yalnızca her modül, satır ve sütun için doğru ayarlar kullanılarak yapılır. Nasıl yapılacağını göstereceğimiz beş örneğe bakalım.
Masaüstünün ilk örneği
İlk renk: #636363
İkinci renk: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç pozisyonu:% 0
Son pozisyon:% 47 Sütun 2’nin arka plan rengi de sütun 2’nin arka plan rengi olarak ‘#d8d8d8’ ayarlamamız gerekir. Tasarım sekmesine yapışkan hareket edin ve alt kategori boyutu için aşağıdaki ayarları kullanın:
Özel genişlik kullanın: evet
Özel genişlik:% 100
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Aralık alt kategorisi açılış mesafesi ve ikinci sütunun üst, sağ, alt ve sol dolguya ’50px’ ekleyin. Modül ilk sütun şekli gradyan destek resmini ilk sütun hızına ve bunun için aşağıdaki gradyan arka planını kullanın: Birinci Renk: RGBA (255,255,255.0)
Renk İkinci: #086191
Gradyan Türü: Doğrusal
Gradien yönü: 107deg
Başlangıç Pozisyonu:% 60
Son pozisyon:% 60
Hizalama Tasarım sekmesini açın, sol görüntü seviyesini kullanın ve ‘Daima Hücresel Odaklanın’ seçeneklerini etkinleştirin. Mesafe O zaman, alan için alanı açın ve aşağıdaki marj ve dolgu ayarlarını kullanın: Üst kenar: 100 piksel (masaüstü), 0px (tablet ve cep telefonu)
Üst dolgu: 20px
Dolgu Alt: 20 piksel
İkinci sütun metin modülü bir sonraki metin ayarlarıdır, metin modülünü satırın ikinci sütununa ekleyin. Tasarım sekmesini açın ve metin alt kategorileri için aşağıdaki ayarları kullanın: Metin yazı tipi boyutu: 12 piksel
Metin rengi: #000000
Metin Oryantasyonu: Orta
Yapıştırıcı açık alt kategori boyutlandırması,%84 genişliği kullanın ve hizalama modülünün ortasını seçin. Son mesafe, üst ve alt kenar boşluklarına ’50px’ ekleyin. Üçüncü sütun görüntü modülü gradyan arka planı Üçüncü sütuna başka bir görüntü modülü ekleyin ve aşağıdaki gradyan arka planını kullanın: İlk renk: #A36100
İkinci renk: RGBA (255,255,255.0)
Gradyan Türü: Doğrusal
Gradyan yönü: 73 derece
Başlangıç Pozisyonu:% 40
Son pozisyon:% 40
Hizalama Tasarım sekmesini açın, sol görüntü seviyesini seçin ve ‘Daima Hücresel Odaklanın’ seçeneklerini etkinleştirin. Son mesafe, aşağıdaki özel marj ve dolguyu ekleyin: Üst kenar: 300 piksel (masaüstü), 0px (tablet ve cep telefonu)
Üst dolgu: 20px
Dolgu Alt: 20 piksel
Sonuçlar Masaüstündeki sonuçları tekrar görelim: Ve cep telefonunda: İkinci bir örnek yapmaya başlayın İkinci örnek masaüstünde şöyle görünüyor: İlk yeni parçayı ekleyin, yeni bir standart parça ekleyin. İki sütundan bir satır ekleyin, bir satır iki sütun ekleyin. Sütun Renk Sütunu 2 Satır ayarlarını açın ve sütun 2’nin arka plan rengi olarak ‘#eded’ ekleyin. Yapıştırıcı Tasarım sekmesini açın ve aşağıdaki değişikliklerin alt kategori boyutu için geçerli olmasını sağlayın: Özel genişlik kullanın: evet Özel genişlik:% 100
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
İlk sütun görüntü modülü hizalama Görüntü modülünü ilk sütuna ekleyin, sol görüntü seviyesini kullanın ve ‘her zaman hücresel görüntülere odaklanın.
Boşlukların boşluk alt kategorilerini açın ve aşağıdaki ayarları kullanın: Üst kenar: 100 piksel (masaüstü), 0px (tablet ve cep telefonu) Üst dolgu: 0px
Aşağıda dolgu: 0px
Metin Modülü İkinci Sütun Metin Ayarları Ardından, metin modülünü ikinci sütuna ekleyin ve aşağıdaki ayarları metin alt kategorisine uygulayın:
Metin yazı tipi: lato Metin yazı tipi boyutu: 12 piksel
Metin rengi: #000000
Yüksek çizgi metin: 2.2em
Metin Oryantasyonu: Orta
Yapışkan açık alt kategori boyutu ve ‘75%’ genişliği uygulayın.
Son mesafe, spasi alt kategorisi için aşağıdaki ayarların geçerli olduğundan emin olun: Üst kenar: 120px (masaüstü), -80 (tablet ve cep telefonu) Sol kenar boşluğu: -240px (masaüstü), 80 (tablet), 45 (cep telefonu)
Üst, sağ, alt ve sol dolgu: 50px (masaüstü ve tablet), 20px (telefon)
Sonuçlar tamamlandıktan sonra, masaüstünde aşağıdaki tasarımı göreceksiniz:
Ve cep telefonunda: Bir sonraki üçüncü örneği yapmaya başlayın, aşağıdaki örneklerimiz var: Bir kez daha yeni bir parça ekleyin, yeni bir standart parça ekleyin. Bu satır için ihtiyaç duyduğumuz sütun yapısının iki sütunu bir satır ekleyin aşağıdaki gibidir: Sütun Renk Sütunu 1 Satır ayarlarını açın ve sütun 1’in arka plan rengi olarak ‘#e8e8e8’ kullanın. Sütun 2 Arka Plan Gradyan Gradyan Arka Planı İkinci sütun için gereken aşağıdaki gibidir: İlk renk: #e8e8e8 İkinci renk: RGBA (255,255,255.0) Sütun 2 gradyan tipi: doğrusal
Sütun 2 gradyan yönü: 147deg
Sütun 2 Başlangıç Konumu:% 25
Sütun 2 Son Konum:% 9
Yapıştırıcı açık alt kategori boyutu ve aşağıdaki ayarları kullanın:
Özel genişlik kullanın: evet
Özel genişlik:% 100 Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Son mesafe, ilk sütunun üst ve alt dolgusuna ’70px’ ekleyin.
İlk sütun görüntü modülü hizalama Görüntü modülünü ilk sütuna ekleyin, sol görüntü seviyesini kullanın ve ‘her zaman hücresel görüntülere odaklanın.
Boşlukların boşluk alt kategorilerini açık ve sol kenar boşluğuna ‘300 piksel’ ekleyin. Metin Modülü İkinci Sütun Renk Arka Plan Rengi Metin modülünü ikinci sütuna ekleyin ve arka plan rengi olarak ‘#3D3D3D’ kullanın. Metin Ayarları Tasarım sekmesini açın ve metin alt kategorileri için aşağıdaki ayarları kullanın: Metin yazı tipi: lato Metin yazı tipi boyutu: 12 piksel Metin rengi: #ffffff
Yüksek çizgi metin: 2.2em
Metin Oryantasyonu: Orta
Yapıştırıcı açık alt kategori boyutu ve genişlik için ’75’ kullanın.
Son mesafe, boşluk alt kategorisi için aşağıdaki ayarları kullanın:
Üst kenar: 130px (masaüstü), -200 (tablet ve cep telefonu) Sol kenar boşluğu: -180px (masaüstü), 80 (tablet), 50 (cep telefonu) Üst, sağ, alt ve sol dolgu: 50px (masaüstü ve tablet), 20px (telefon)
Sonuçlar tamamlandıktan sonra, masaüstündeki sonuçlar şöyle görünecek: ve telefonda bunun gibi:
Yapacağımız dördüncü örneğin dört örneğini yapmaya başlayın:
Üzerinde çalıştığınız sayfaya standart bir parça ekleyerek yeni bir bölüm ekleyin. İki sütundan bir satır ekleyin, bir satır iki sütun ekleyin. Yapışkan açık alt kategori boyutu ve aşağıdaki değişiklikleri yapın: Özel genişlik kullanın: evet Özel genişlik:% 60 Özel Talang genişliği kullanın: evet Talang genişliği: 1
İlk Görüntü Modülü İlk hizalama sütunu, görüntü modülünü ilk sütuna ekler, doğru görüntü seviyesini kullanır ve ‘her zaman hücresel görüntülere odaklanın.
Yapıştırıcı, görüntü modülünün boyutunun alt kategorisine gider, ‘%89’ genişliğini kullanır ve modülün doğru hizalamasını seçin.
Görünürlük Gelişmiş sekmesini açın ve mobil ve tabletlerdeki görüntü modüllerini devre dışı bırakın. Bunu kullanılan 3 görüntü modülü için yapacağız. Kendiniz için tabletlerde ve cep telefonlarında görüntülemek istediğinize karar verebilirsiniz, bizim durumumuzda sağ üst köşede bir resim olacaktır.
İlk hizalama sütununun ikinci görüntü modülü başka bir görüntü modülü ekler, tam görüntü seviyesini kullanır ve ‘her zaman hücresel görüntülere odaklanmayı etkinleştirin. Sınır aşağı kaydırın ve aşağıdaki sınırlardan yararlanın: Sınırı kullanın: Evet Sınır rengi: #ffffff Sınır Genişliği: 5 piksel Sınır Gücü: Katı
Son görünürlük, Gelişmiş sekmesini açın ve görüntü modülünü mobil ve tabletlerde devre dışı bırakın.
Birinci Görüntü Modülü İkinci hizalama sütunu, bir sonraki görüntü modülünü ikinci sütuna ekler, sol görüntü seviyesini kullanın ve ‘her zaman hücresel görüntülere odaklanın.
Sınırla aşağı kaydırın, sınır alt kategorisini açın ve aşağıdaki ayarların geçerli olmasını sağlayın: Sınırı kullanın: Evet
Sınır rengi: #ffffff Sınır Genişliği: 4px Sınır Gücü: Katı İkinci hizalama sütununun ikinci görüntü modülü, son görüntü modülünü ikinci sütuna ekler, sol görüntü seviyesini kullanır ve ‘her zaman hücresel görüntüye odaklanmayı etkinleştirin.
Yapıştırıcılar daha sonra, boyut alt kategorisini açın, ‘%89’ genişliğini kullanın ve sol modülün hizalamasını seçin.
Görünürlük bu görüntü modülünü mobil ve tabletlerde de devre dışı bırakır.
Önceki satırı bitirdikten sonra bir sütun satır ekleyin, devam edin ve diğerlerini ekleyin. Bu sefer, satır sadece bir sütun gerektirir. Yapıştırıcı Sıra ayarlarında tasarım sekmesini açın, ‘Özel Genişlik Kullan’ seçeneğini etkinleştirin ve özel genişlik olarak ‘581px’i kullanın.
Arka Plan Rengi Metin Modülü Metin modülünü yeni satıra ekleyin ve arka plan rengi olarak ‘RGBA (255.255.255.0.92)’ seçin. Metin Ayarları Tasarım sekmesine geçin ve aşağıdaki ayarların alt kategori metnine uygulanmasını sağlayın: Metin yazı tipi: lato Metin yazı tipi boyutu: 12 piksel Metin rengi: #000000 Yüksek çizgi metin: 2.2em Metin Oryantasyonu: Orta
Yapıştırıcılar daha sonra, boyutlandırma alt kategorisini açın, genişliğe ’75’ ekleyin ve hizalama modülünün ortasını seçin.
Son mesafe, spasi alt kategorisi için aşağıdaki ayarların uygulanmasını sağlayın:
Üst kenar: -580px (masaüstü), -200 (tablet ve cep telefonu)
Sol kenar boşluğu: – 180px (masaüstü), 80 (tablet), 50 (cep telefonu)
Üst, sağ, alt ve sol dolgu: 50 piksel Sonuçlar tamamlandıktan sonra, masaüstünde aşağıdaki sonuçları izleyebileceksiniz: Ve cep telefonunda aşağıdakiler:
Son örneklerin son beş örneğini yapmaya başlayın Size aşağıdaki gibi nasıl yeniden yapacağınızı göstereceğiz: Sayfanıza tam geniş bir parça ekleyerek tam geniş bir parça ekleyin. Tam geniş görüntü modülü Fullwidth bölümünde, FullWidth görüntü modülünü ekleyin.
Önceki parçanın hemen altına yeni bir parça ekleyin, başka bir parça ekleyin. Bu sefer, kısım tam genişlik değil standart olmalıdır. Üç sütun ekleyin Üç sütunu yeni standart bölüme ekleyin.
Renk Arka Plan Sütunları 1, 2 & 3 Satır ayarlarını açın ve sütuna aşağıdaki arka plan rengini belirleyin: Sütun 1: #EAEA Sütun 2: RGBA (12.113.195.0.17) Sütun 3: RGBA (131,0,233.0.09) Yapıştırıcı Tasarım sekmesini açın ve boyuttaki alt kategoride aşağıdaki değişiklikleri yapın: Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe daha sonra aralık alt kategorisini açın, üst kenar boşluğuna ‘-60px’ ve her sütunun alt dolgusuna ’50px’ ekleyin.
Metin Modülü İlk sütun Renk Arka Planı İlk sütuna metin modülünü ekleyerek ve arka plan rengi olarak ‘RGBA (255.255.255.0.89)’ kullanılarak devam edin. Metin Ayarları Tasarım sekmesini açın ve metin alt kategorileri için aşağıdaki ayarların uygulanmasını sağlayın:
Metin yazı tipi: lato
Metin yazı tipi boyutu: 12 piksel
Metin rengi: #000000 Yüksek çizgi metin: 2.2em Metin Oryantasyonu: Orta Sınır Sınır alt kategorisini açın ve aşağıdaki ayarları kullanın:
Sınırı kullanın: Evet
Sınır rengi: #ffffff
Sınır Genişliği: 17 piksel
Sınır Gücü: Katı
Daha sonra yapıştırıcı ‘%75’ genişliğini kullanın ve orta modülün boyut alt kategorisinde hizalanmasını seçin. Son mesafe, boşluk alanını açın ve aşağıdaki ayarların uygulanması: Marj üstü: -300 piksel (masaüstü), 0px (tablet ve cep telefonu)
Üst dolgu, sağ, alt, sol: 50px (masaüstü ve tablet), 20px (telefon)
Klon metin modülü iki kez ve diğer iki sütuna yerleştirin lütfen ve metin modülünü iki kez klonlayın. Ardından, her klonu kalan iki sütuna yerleştirin. İkinci sütun metin modülünün boşluğunu değiştirin, ikinci sütuna yerleştirilen metin modülünün kenar boşluğunu ‘-220px’ olarak değiştirmeliyiz.
Üçüncü sütundaki metin modülü için aynı sayının aynı üçüncü sütunu için boşluk modülünü değiştirin, ancak değer ‘-140px’.
Sonuçlar ve burada masaüstünde sonuçlar var: Ve cep telefonunda: Bu yazıdaki son zihin, size kendi web sitelerinizde kullanabileceğiniz bazı güzel ve eğlenceli editoryal stil düzenleri gösterdik. Bu örnekler, divi seçiminin ne kadar esnek olduğunu ve ne kadar yaratıcı alabileceğinizi göstermektedir. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! 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! Julia Team / Shutterstock.com tarafından Üstün Görüntü
