Marj Kontrolü ve Talang Divi Varsayılanını Kullanmanın 5 Yaratıcı Yolu
Marj ve Talang Divi kontrolü, düzeninizi yaratıcı bir şekilde gerçekten değiştirebilecek iki güçlü tasarım ayarıdır. Ve nasıl çalıştığını anlarsanız, dışarı çıkıp kendiniz için yeni şeyler denemekten çok korkmayacaksınız. Bu yazıda, size divi marjı ve oluk kontrolü kullanmanın 5 yaratıcı yolunu göstereceğim. Bazılarının elde edilmesi diğerlerinden daha kolay olacak, ancak genel olarak, bu iki tasarım ayarı için yeni takdirle gideceksiniz. Kenar boşluğunun ve oluk marjının genişliği hakkında, elemanlar arasındaki (veya dış) mesafeyi ifade eder. Kutu olarak parçaları, satırları veya modülleri düşünün. Marj, kutunun dışında alan ekleyen ve sayfadaki kutuyu ayırmak için kullanılan şeydir (bu burada daha ayrıntılı olarak tartışılmaktadır).
Oluğun genişliği, bir sıradaki sütun arasındaki marj için sadece lüks bir terimdir. Hızlı bir şekilde sağ kenar boşluğu ile yeterli ızgara oluşturmak zordur. Bu nedenle Divi’nin her satır için oluk genişliği seçeneği vardır. Bu, kolonun mesafesi nedeniyle ağrıyı hafifletmeye yardımcı olur. Oluk genişliği için isteğe bağlı değer, sütun arasındaki sıfır marjı temsil eden 1 ila 4 arasında değişir. 2, sütun arasında% 3’lük sağ marjı temsil eder. 3, sütunda% 5.5 sağ marjı temsil eder. 4, sütunlar arasında% 8 sağ marjı temsil eder. Şimdi karşılaştıklarımız hakkında daha iyi bir kavrama var, hadi kullanmaya başlayalım!İşte Divi Marjı ve Oluk Kontrolü Kullanmanın 5 Yaratıcı Yolu: Sneak Peek İşte bu teknikle yapılabilecek tasarımın bir bakış: 5 Marj Kontrolü ve Talang Divi Kullanmanın Yaratıcı Yolları Varsayılan YouTube Kanalımız #1 Genişletme Görüntü Modülünü Barisk Dışında Çünkü Hasarlı Izgara Tasarımları, benzersiz bir görünüm için geleneksel ızgara düzenini kıran popüler şeylerdir. İşin püf noktası, modülü belirli bir yöne uzatmak için negatif bir marj kullanmaktır. Bu yaratıcı tekniğin iyi bir örneği Landing Gym Fitness sayfasının düzeninde bulunabilir. “Üye Olma” başlıklı bölümde, görüntünün sıra kabının dışında nasıl genişletildiğini görebilirsiniz. İşte bu tasarıma nasıl ulaşılacağına dair temel bir fikir. Dört sütunlu iki satırla yeni bir parça oluşturun. Aşağıdaki ayarların her satırını verin: Hollanda Genişliği: 1 Özel Kenar: 0px Üstü Özel Dolgu: 0px üst, 0px aşağıda
Ardından aşağıdakilerin ayarlarını güncelleyin: Arka plan gradyanının sol rengi: #FA2A20 Sağ Renk Arka Plan Yasası: RGBA (16,23,45,0.85) Gradyan Yönü: 90 Derece Başlangıç Pozisyonu:% 50 Nihai Konum:% 50 Özel Dolgu: 0px üst, 0px aşağıda Ardından, üst sırada, görüntü modülünü sütun 3’e ekleyin ve modüle görüntü ekleyin. Ardından, ayarları aşağıdaki gibi negatifin üst marjı ile güncelleyin: Özel Marj: -6VW TOP İkinci sırada, görüntü modülünü sütun 2’ye ekleyin ve modüle görüntü ekleyin. Ardından, aşağıdaki negatif marjla ayarları aşağıdaki gibi güncelleyin: Ardından, görüntü modülünü aynı satırdaki sütun 4’e ekleyin ve modüle görüntü ekleyin. Ardından, ayarları aşağıdaki gibi düşük negatif marjla güncelleyin: Özel marj: -5vw daha düşük 1’e ayarlanmış setlerin genişliğine sahip olduğumuz için, aralarında boşluk olmadan birbirlerine bakan resimler/modüller. Bu,% 50 gradyanın başlangıç konumu ile birleştirilir, arka planda iyi bir simetrik döküm sağlar. Özel bir marj için uzun bir VW ünitesi kullandığımı fark etmiş olabilirsiniz. Birim uzunluğu VW (Görünüm Portu Genişliği) Tarayıcının genişliğine göre. Yani 10VW temel olarak tarayıcı penceresinin% 10’udur. Bu, tasarımın atlamadan tarayıcıya ayarlanmasını sağlar. Daha fazla bilgi için uzun birimle ilgili makalemize bakın. İşte son tasarım. #2 Sütun dışındaki metni ve bölücü modülünü genişletme
Metin modülünü sütunun veya satırın dışına genişletmek, benzersiz bir başlık tasarımı için kapıyı açar. Sıralar veya sütunlar özel bir arka plan öğesi olarak işlev görebilir, çünkü metin benzersiz bir ekran için arka ve sağdaki arka plan öğelerini aşar. Bu yöntem bu. İlk olarak, iki sütunlu yeni bir parça oluşturun. Herhangi bir modül eklemeden önce, satır ayarlarını aşağıdaki gibi güncelleyin: Renk Arka Plan Sütun 1: #00CA8F Özel Genişlik: 700px Talang Genişliği: 4 Gölge Kutusu: Bkz. Kutu: RGBA (100,113,248.0.37) Sütun dışındaki modülleri genişletmemizi kolaylaştırmak için sütunlar arasındaki boşluğu en üst düzeye çıkaran 4. oluk genişliğini ayarlayın. Şimdi metin modülünü sütun 1’e ekleyelim ve aşağıdaki ayarları güncelleyelim: Yazı Tipi Başlık: FIRA SANS Yoğunlaştırılmış Leight Başlık Başlık: TT Seviyelendirme Metin Başlığı: Orta Renk Metin Başlığı: #0F135D Metin Boyutu Başlık: 100px (60 Piksel (60 Boşluklar (60 boşluk (60 boşluk harf başlığı: 10px genişlik: 600px özel marj: -100px sol, -100 piksel sağ dolgu özel: 0px üst, 0px alt, 0px sol, 0px bu tasarımdan sağ kilit modülün genişliğini büyütmek için Böylece, negatifin sağ ve sol kenar boşluğunu eklediğimizde, metnin her iki taraftaki sütunun ötesine geçecek alanı vardır.
Ek bir tasarım öğesi olarak, sütunun dışında da uzanan sütun 2’ye bir bariyer de ekleyebilirsiniz. Bunu yapmak için, bölücü modülünü sütun 2’ye ekleyin ve aşağıdaki ayarları güncelleyin: Renk: #0F135D Bakım Ağırlığı: 12px genişlik:% 150 Özel Marj: 15px yukarı,% -25 sol,% -25 sağ aynı tasarım tekniği de burada kullanılır. Sol ve sağdaki sütunun dışındaki modülleri genişletebilmemiz için genişliği (veya maksimum genişliği)% 150’ye çıkarıyoruz.
Sonuçlar aşağıdadır. İşte cep telefonunda.
Ayrıca, tam ekran ayarlarında bazı güncellemelerle bunu kolayca bir sütun düzenine dönüştürebilirsiniz. Bunu yapmak için, satır sütununun düzenini bir sütuna değiştirin ve satırın genişliğini 400 piksel olarak değiştirin. Sonuç bu.
Daha fazla ilham için, Divi’de benzersiz bir sütun düzeni oluşturmak için modüllerin nasıl genişletileceği konusundaki bu gönderiye bakın. #3 Özel bir marj düğmesine sahip örtüşen modüller, düğmeyi tasarımınız boyunca benzersiz bir yerde konumlandırmak için kullanılabilir. En sevdiğim şeylerden biri, düğmeyi başka bir modülle örtüşecek şekilde konumlandırmaktır.
Ve negatif kenar boşluklarımız için piksel uzunluğu değerini kullandığımız için, düğme hücresel olarak da yerinde kalacaktır. Daha fazla ilham için, benzer teknikleri kullanarak animasyonlu kaydırma düğmesine nasıl ekleneceğine dair bu gönderiye bakın. #4 üst üste binen parçalar Satırlarla örtüşen parçalar basit bir süreçtir, ancak sayfanızın tasarımını iyileştirmek ve içeriği öne çıkarmak için yaratıcılık seviyesini gerçekten artırabilir.Bu konsepti göstermek için, gayrimenkul düzeni paketinin gayrimenkul elde tutma sayfasına bakalım.İkinci bölümdeki içerik satırının üst kısımla örtüşene kadar nasıl çekildiğini unutmayın ve içeriği öne çıkarın.Bunun nasıl yapıldığını hızlı bir şekilde gözden geçirelim.Hatta, içeriği iyi çerçevelemek için her iki tarafta birkaç mesafe olması için 1440px’lik özel bir genişlik verilir.Olukların genişliği, üç açıklama ve içerik için gereken alanı en üst düzeye çıkarmak için 1 düzenlenmiştir.Ve son olarak, satıra özel -10vw marjı verilir.Bu, sırayı yukarıdaki kısımla örtüşecek şekilde çeker. Basit doğru mu?Bu konsept hakkında daha fazla bilgi için, modüllerin ve satırların üst üste binme konusundaki yazıya bakın.#5 Yüzerken çizgiyi uzatın Bu yüzen stil, web sitenizdeki belirli hizmetler veya promosyon teklifleri hakkında daha fazla bilgi vermenin iyi bir yoludur. Bu Hover efektinin anahtarı, tarayıcı penceresinin dışındaki yarım satırları uzatmak için özel bir marj kullanmaktır. Ardından, imleci görünür çizgilerin yarısına işaret ederken, marj geri döner ve diğer satır içeriğinin yarısını görüntüler. Bunun nasıl yapıldığını göstermek için, tesisatçı hizmet sayfasını tesisat düzeni paketinden kullanacağım. Sayfanıza yüklenen tesisatçı hizmetinin düzenini aldıktan sonra, “%10 indirim” yazan büyük bir promosyon teklifi ile bölüme gidin. Bu, Sütun 1’de büyük tanıtım metinleri olan ve sütun 2’deki promosyon hakkında daha fazla bilgi içeren iki sütun satırıdır. Yapacağımız şey, Sütun 1’deki bilgileri varsayılan olarak gizlemek ve daha sonra bu bilgileri havada bulunun. Bunu yapmak için aşağıdaki satır ve güncelleme ayarlarını açın: Sütun 1 Renk Arka Plan: RGBA (12.113.195.0.16) Satır Hizalama: Doğru Özel Genişlik: 800 piksel Sıkış Genişliği: 1 Şimdi Hover’ı almak için özel marj ayarlarımızı eklememiz gerekir Efekt. Ve oluk 1’in genişliğini kullandığımız için, sütun 1’e biraz dolgu eklememiz gerekir. Aşağıdakileri güncelleyin: Özel kenar boşluğu (masaüstü): -400px sağ sütun 2 Özel Yatak: 2VW sol, 2VW satır genişliğimiz 800px olduğu için , 400 piksel (hattın yarısı) gizlemek istiyoruz. Bu yüzden 400 piksel sağ marjı ayarladık. Özel Marj (İmleci Nokta): 0px doğru özel kenar boşluğuna (tablet): 0px sağ kenar boşluğunu 0px’e geri ayarlayarak, imleci yönlendirirken, tüm çizgi görünür hale gelir! İşte nihai sonuçlar. Ve tüm çizgi cep telefonunda görünür hale gelir. Daha fazla ilham daha önce yapılan düzende marj ve oluk kullanan benzersiz stillerin birçok örneği vardır. Bu yazıda birkaç unsur yaptım. Bunun gibi daha fazla öğretici istiyorsanız, blogumuzdan aşağıdaki yayınlara bakın: Divi’de metin soyut bir tasarım öğesi olarak nasıl kullanılır Divi’de içerik dikey olarak nasıl uyumlaştırılır Divi modülünü kaplamak için opaklık, dolgu ve negatif marj nasıl kullanılır Son zihin Umarım bu yazının özel marjlar ve kanalizasyonlar kullanarak basit ama benzersiz tasarımlar göstermede yararlı olduğunu umuyorum. Ve eminim ki bu olağanüstü tasarım tekniğine daha fazla alıştıktan sonra, kendi benzersiz düzeninizi yapmanın ne kadar kolay olduğuna şaşıracaksınız. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
