Divi ile benzersiz bir diyagonal düzen nasıl tasarlanır
Sayfa içeriğiniz için diyagonal bir düzen yapmak, özellikle duyarlı web tasarımında biraz zor olabilir. Ancak, Divi Builder ile, aslında eğlenceli olabileceğini buldum. Bölme parçalarının, sütun mesafelerinin ve VW uzunluk birimlerinin doğru kombinasyonu ile herhangi bir Divi bölümüne diyagonal düzen ekleyebilirsiniz. Ve şaşırtıcı bir şekilde, bu tasarım tekniği farklı tarayıcı boyutlarında iyi dağılacaktır. Bu öğreticide, tarayıcı pencerenizin boyutu ile iyi ve ölçekli görünen çapraz içerik (modül) ile nasıl bir düzen yapacağınızı göstereceğim.
Başlayalım. Zirve kaydı
Bölme parçasının boyutunu ve köşesini belirledikten sonra, modülümüz bölücünün diyagonal gelişimiyle eşleşmesi için her sütuna kademeli olarak dolgu uygulamamız gerekir. Her sütuna eklediğiniz herhangi bir resim veya içerik, her şeyin düzgün ve görünür kalması için aynı boyutta/miktara sahip olmalıdır. Başlığı ilk bölümün bir parçası haline getirmek oldukça düz. Vurgulamak istediğim ana tasarım öğesi, 20VW’nin alt bölücünün yüksekliğidir. Bu yükseklik, tüm düzen tasarımlarındaki tüm parçalarımız için standart bir önlem olarak işlev görecektir. Diyagonal tasarımın simetrik ve paralel kalması için bu boyutu aynı tutmak önemlidir. İlk kısmı yapmak için yeni bir sayfa eklemek, bir başlık verin ve görsel bir yapımcı uygulayın. Normal bölümü bir sütun satırı ile ekleyin (veya yalnızca görüntülenen varsayılanı kullanın). Bir modül eklemeden önce, bir arka plan görüntüsü ve gradyan streç olması için parçanın ayarlarını güncelleyin. Arka plan görüntüsü: [Şekil 1920 x 1080’i ekleyin] Gradyan Arka Planın Sol Rengi: RGBA (87.113.113.0.89) Gradyan Arka Plan Sağ Renk: RGBA (68.112.112,0.9)
Ardından, VW uzunluğu ünitesini kullanarak bazı özel pedler ekleyin: Pilding Custom: Yukarı 30VW, 40VW’nin altında Ayarları kaydedin. Şimdi metin modülünü aşağıdaki içerikle bir sütun satırınıza ekleyin:
Diagonal Tasarım
Yaratıcı Hizmetler
Tasarım ayarlarını aşağıdaki gibi güncelleyin: Metin Yazı Tipi: Poppins Metin Boyutu Metin: 2VW (Masaüstü), 20px (Tablet) Metin Oryantasyonu: Orta Renk Metin: Yazı Tipi Işık Başlığı Başlık: Poppins Ağırlık Harfleri Başlık: Yarı Kalın Yazı Tipi Stil Başlık Başlık : 4VW (masaüstü), 30px (Tablet) Uzay Mektubu Başlığı: 0.2EM Harf alanı için EM uzunluğunun değeri VW yazı tipi boyutu değeri ile iyi açıklanacaktır. Metin modülünün alt düzenleyicisini kaydedin, düğme modülünü aşağıdaki ayarlarla ekleyin:
Bir sonraki bölüm için ikinci bölümü oluşturan bu lüks veya karmaşık bir şey değildir. Bir sütun satırı ile yeni bir düzenli bölüm ekleyin. Bölümün aşağıdaki özel pedlere sahip olduğundan emin olun: Pilding Custom: Top 15VW’de, 15VW’nin altında, metin modülünü aşağıdaki yapay içerik satırına ekleyin:
Hakkımızda
İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Ayrıca, bu içeriğin her yönünü modül tasarım ayarlarında şekillendirebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz.İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Bu içeriğin her yönünü modül tasarım ayarlarında stilize edebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz.
Tasarım ayarlarını aşağıdaki gibi güncelleyin:
Metin Yazı Tipi: Poppins Başlık 2 Yazı Tipi: Poppins Başlık 2 Yazı Tipi Ağırlık: Yarı Kalın Başlık 2 Yazı Tipi Stil: TT Başlık 2 Metin Boyutu: 4VW Genişlik:% 70 (masaüstü),% 80 (tablet),% 100 (akıllı telefon)
İkinci Bölüm Oluşturma: Görüntüler için Diagonal Düzen Bir sonraki bölüm için, 4 görüntü ile çapraz parça yapacağız. Bu tasarımın düzgün çalıştığını unutmayın, VW uzunluğu birim değerinizle bir amacınız olmalı ve aynı boyutta görüntü kullanmanız gerekir. Dört sütun satırı yapısına sahip yeni bir normal parça ekleyin. Ardından görüntü modülünü sol sütuna ekleyin. Modülü aşağıdaki ayarlarla güncelleyin:
LightBox’ta Güncelleme: Evet
Çizim: Exhanse Icon’un Aktif Rengi: #FFFFFFF Renk Tarihi Yönü: RGBA (87.113.113.0.69) Zorunlu Tam Genişlik: Evet Resmin Altında Boşluklar Göster: Hayır Ayarlar yerine eklenen bir görüntü ekledikten sonra, diğer üç görüntü yapmak ve her sütuna yerleştirmek için görüntü modüllerini yinelendirin. Bu şekilde her biri için ayarları güncellemenize gerek yoktur. Ardından her biri için yeni resimler yükleyin. Görüntünüzün tam olarak aynı boyutlara sahip olduğundan emin olun (600 piksel 850px).
Şimdi tam geniş bir düzen oluşturmak ve görüntüyü özel yatak ile değiştirmek için satır ayarlarını güncelleyeceğiz. Satır ayarlarını aşağıdaki gibi güncelleyin: Bu çizgiyi tam genişlik yapın: evet Özel Talang genişliği kullanın: Evet Talang Genişliği: 1 Dolgu Özel: 0px üst, 0px alt, 0px sol, 0px sağ sütun 1 Dolgu Özel: 15VW üst (masaüstü), 0px Üst (Tablet) Sütun 2 Dolgu Özel: 10VW Üst (Masaüstü), 0px Üst (Tablet) Sütun 3 Dolgu Özel: 5VW UP (Masaüstü), 0px Up (Tablet) Not İlk üç sütunun yavaş yavaş nasıl özel bir üst taşıma sahip olduğunu not edin çapraz görüntü düzeni yapmak için azaltılmış. Ayarları ayarlayın. Resmimiz yerinde, tasarımı tamamlamak için parça bölücülerimizi ekleyelim. Aşağıdaki bölüm ayarlarını açın: Bölme: Bölme Stili Üstü: Bölücünün ekran yakalamasına bakın: #ffffff Yüksek Bölüm: 20VW (masaüstü), 0px (tablet), 0px (akıllı telefon) Geri bölücü: Yatay bölücü: Bölücü kuvveti altında: Ekran görüntüsüne bakın Bölücü: #FFFFFF Yüksek Bölücü: 20VW (masaüstü), 0px (tablet), 0px (akıllı telefon) Çiçek bölücü: yatay dolgu özel: 0px üst, 0px aşağıda Not: Görüntünüzde 600 × 850 dışındaki boyutlar varsa, dolgu satırını, bölücü görüntüyle doğru şekilde örtüşecek şekilde ayarlamanız gerekir. Dördüncü Bölümü yapın Dördüncü Bölüm Yapın, İkinci Bölümü Kopyalayın ve Üçüncü Bölümün altına yapıştırın. Ardından içeriği aşağıdakilerle güncelleyin:
Üyelerimiz
İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Ayrıca, bu içeriğin her yönünü modül tasarım ayarlarında stilize edebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz.
Beşinci Bölüm Oluşturma: Takım Üyeleri için Diagonal Düzen Bir sonraki bölüm için, sayfanızdaki üyeleri görüntülemek için bir bölüm oluşturacağız. Tasarım sürecini hızlandırmak için devam edin ve üçüncü Bölüm (resminizi içeren) ve sayfanın altına yapıştırın. Dördüncü sütunda görüntü modülünü silin ve satır sütununun yapısını dört değil, üç sütuna değiştirin. İlk sütundaki görüntü modülünün altında, kişilerin modülünü ekleyin.Varsayılan metin içeriğini kaydedeceğiz. Ancak devam edin ve modülde görünecek şekilde bir sosyal profil URL’si ekleyin. Ardından görüntüyü silin, çünkü çalışanlarımızın görüntüleri için yukarıdaki görüntü modülünü kullanacağız. Tasarım sekmesinin altında aşağıdakileri güncelleyin: Metin Rengi: Özel Dolgu Işığı:% 8 Üst,% 8 daha düşük,% 8 sol,% 8 sağ
Metni göremediniz, ancak üç sütunun her birine arka plan rengini ekledikten sonra görüleceksiniz. Şimdi insanların modülünü kopyalayın ve diğer iki sütundaki diğer iki görüntü modülü altına ekleyin Aşağıdaki satır ve güncelleme ayarlarını açın: Sütun Renk Sütunu 1: #577171 Sütun 2 Renk Arka Plan: #577171 Renk Renk Sütunu 3: #577171 Tasarım sekmesinin altında, boyutu ve alanı aşağıdaki gibi güncelleyin: Talang Genişliği: 3 Eşit Sütun Yüksekliği: Evet Özel Dolgu: 0px Özel Dolgu (Masaüstü): 12VW üst, 6VW Sütun 1 Dolgu Özel (Tablet): 0VW Üst,, 0VW Daha Alt Sütun 2 Dolgu Özel (Masaüstü): 6VW Üst Sütun 2 Dolgu Özel (Tablet): 0VW Üst Sütun 3 Dolgu Özel: 0px Top Ayarları kaydedin. Görüntünüzü yenisiyle güncellemeyi unutmayın. Şimdi sonucu görün … Bu duyarlı diyagonal düzen, VW uzun ünitesinin gücünü vurgular.VW’yi boşluk elemanları ve boyutları için tasarım boyunca kullandığımız için, sonuçlar masaüstü bilgisayarlar için tüm tarayıcı boyutlarında mükemmel bir şekilde ölçeklenecek. Tabletler ve akıllı telefonlarda, düzen çapraz elementler olmadan normal temiz tasarıma ayarlanacaktır. Divi ile diyagonal bir düzen tasarlayan son zihin çok benzersiz sonuçlar verebilir.Sır, tasarımı tarayıcınızın genişliğine dağıtmak için VW uzun birimi kullanarak bölücü yüksekliği, görüntü boyutu ve alan arasındaki doğru kombinasyonu kullanmaktır.Bu, farklı modüller, böcekler ve renklerle yapabileceğiniz olası tasarımdan buzdağının zirvesidir.Umarım bu size kendi geometrik çalışmanızı yaratmanız için ilham verir.Aşağıdaki yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
