Divi’de içeriğinizi çerçevelemek için soyut çizgiler nasıl tasarlanır
Divi, görsel oluşturucu kullanmanın çeşitli şekillerde soyut çizgileri yapmanızı sağlar. Bölücü, sınır, arka plan gradyanı ve kutunun gölgesi ihtiyacınız olan seçeneklere sahiptir. Alanla biraz yaratıcı iseniz, içeriğinizi yaratıcı bir şekilde çerçevelemek için tüm bu öğelerin bir kombinasyonunu kullanabilirsiniz. Bu öğreticide, düzen kısmınızı bir çizgi kullanarak benzersiz bir tasarıma dönüştürmenin kolay bir yolunu göstereceğim. Aşağıdakiler kaydı, yapacağımız tasarımdan gizlice bir göz attı.
Tasarım İlhamı Bu tasarımın arkasındaki ilham, Divi Cryptocurrency Düzen paketinden geliyor. Sayfa düzeni, iki sütun ızgarasının düzenini ortada bölmek için sayfa altında devam eden bağlantı hattından başlığın arka plan görüntüsüne sahip benzersiz bir tasarım görüntüleme. Bu yüzden içeriği biraz daha çerçeveleyen bir çizgi eklemek ve genel tasarıma biraz parlama eklemek için divi kullanma kavramını keşfetmeye karar verdim.Bu tasarımın ana vurguları bölücü modülünün kullanılmasıdır. Tek bir renkle yatay çizgiler yaparken sınırsız bir bölücü modülü buldum. Aslında, bazı ayarlamalarla, arka plan gradyanına sahip dikey bir çizgi yapabilirsiniz! Tek ihtiyacınız olan Divi, bu öğretici için ihtiyacınız olan tek şey Divi. Tasarımımızın temelini sağlamak için sayfanın düzeni hakkında kripto para birimi kullanacağım. Ardından, tasarımı tamamlamak için parçaların, satırların ve modüllerin ayarlarını ayarlayacağım, hattı ilk şeyin ilk kısmınızla ekleyin. Devam edin ve yeni bir sayfa oluşturun ve görsel oluşturucu kullanarak sayfa düzeni hakkında kripto para aktarın. Bu öğreticinin odak noktası ikinci saniyedir (tam genişlik başlığının hemen altında). Bildiğiniz gibi parçanın sınırını ekleyin, parça varsayılan olarak sayfanızın tam geniş sayfasını içerir. Bu nedenle, sol ve sağ parçalardaki 2 piksel sınır neredeyse görünmezdir. Ancak size parçanın özel bir bölümünü verirseniz, sınır görülecektir. Bölümün ayarlarını açın ve bölüm ayarlarını aşağıdaki gibi güncelleyin: Genişlik:% 90 Tesviye Bölümü: Orta Genişlik Sağ Sınır: 4px Sağ Kenar Renk: #332FAF Genişlik Sol Sınır: 4px Sol Sınır Renk: RGBA (237,240,0,0.51) Şimdi endişelenmeyin, özel parçanın genişliği% 100 hücresel olarak geri çekilecektir. Mevcut içerik alanının arka plan rengini, beyaz içerik alanının arka plan rengini ekleyin, böylece parçanızın her iki tarafında açık görebilirsiniz. Bu, sayfa ayarlarınızı girerek ve içerik alanının arka planı için aynı koyu rengi ayarlayarak bölümün arka planına uyacak şekilde değiştirilebilir. Renk Arka Plan İçerik Alanı: #101535 Satırınıza Satır Ekle Şimdi bazı ek çizgi tasarımları yapmak için satır ayarlarını güncelleyelim. Sütunumuza bir satır eklemek için bir sütun arka plan gradyanı kullanarak bir çizgi ekleyin, sütunlarımızın her birine ince bir gradyan eklemek için gradyan arka planımızla küçük bir hile kullanabiliriz. Bu güncellemeyi yapmak için aşağıdakiler:
Sütun 1 Arka Plan Sol Renk Gradyan: RGBA (255,255,255.0) Sütun 1 Arka Plan Gradyan Sağ Renk: RGBA (237,240,0,0.34) Sütun 1 Grade Yönü: 90deg Sütun 1 Başlangıç Pozisyonu: 99.5 Sütun 1 Son Konum:% 0 Sütun 2 Arka Plan Sol Renk Gradyan: RGBA (51,47,175.0.51) Sütun 2 Sağ Renk Düzenlemesi Arka Plan: RGBA (255,255,255.0) Sütun 2 Grade Yönü: 90deg Sütun 2 Başlangıç Pozisyonu: 99.5 Sütun 2 Son Konum:% 0
Geniş bir gelenek verin, çünkü özel parçamıza verdiğimiz için, tasarım öğelerimiz için daha fazla alan yaratmak için bize özel bir genişlik vermemiz gerekiyor. Satırın genişliğini%90’a ayarlayın. Sırayı satırınıza eklemek için kenarlığı ekleyin, aşağıdakileri güncelleyin: Sol sınır genişliği: 2 piksel sol sınır rengi: RGBA (237,240,0,0.0.56) Sağ sınır genişliği: 2px sağ kenar renk: #332faf Modülümüze ekleyeceğimiz çizgilerin uyumunu kırmaya yardımcı olmak için mesafemizin sıralarımızın mesafesini ayarlaması gerekiyor. Bunu yapmak için aşağıdakileri güncelleyin: Özel Dolgu: Sütun 1 üzerinden% 10 Özel:% 5 dip,% 3 sol,% 3 sağ sütun 2 dolgu özel:% 3 sağ,% 3 Kirit bir sonraki metin modülüne ekliyor, biz Ek hatlar tasarlamak için modülümüze bazı sınırlar ekleyecektir. Sol sütundaki görüntü modülü için aşağıdaki ayarları güncelleyin: Genişlik:% 62 (bu bize daha fazla mesafe verecek ve hatlarımızın hizalanmasını kırmaya yardımcı olacaktır) sol sınır genişliği: 4px Sol Sınır Renk: RGBA (67,40,183.0.53 ) Sağ sütunda, üst metin modülünü birkaç boşluk ve sol sınırlarla başlık ile güncelleyin. Ardından, sağ sütundaki ikinci metin modülüne (kukla metin ile) bazı boşluklar ve doğru sınırlar ekleyin: Özel kenar:% 5 üst,% 5 sağ özel dolgu:% 5 (yukarı, alt, sol, sağ) sınır Genişlik Sağ: 2 piksel sağ kenar renk: #332faf
Bu tasarım elemanı düğmesine sınır, arka plan gradyanı ve gölge kutusunu ekleyin. Stile bir çizgi öğesi ekleyeceğiz ve kutunun sınırını, arka plan gradyanını ve gölgesini kullanarak düğmeyi çerçeveleyeceğiz. İlk olarak, aşağıdaki arka plan gradyanını kullanarak düğmeye sol limiti ekleyelim: Sol Renk gradyanı arka plan düğmesi: #EDF000 Sağ Renk Gradyan Arka Plan Düğmesi: RGBA (255,255,255,0) Gradyan Yönü: 90 Derece Başlangıç Pozisyonu: 0% Nihai Konum: 0 % Şimdi sınır boyutunu arttırıyoruz ve kutu gölgemiz için biraz yer yaratmak için renkleri bölümün arka planına uyacak şekilde değiştiriyoruz: Sınır kenarlığı genişliği: 24px Renk Sınır Sınır: #101535 Düğme metnini biraz vermek için bazı boşluklar ekleyin Nefes alanı: Özel Dolgu: Yukarıdaki 1em, kutu çerçevemizin gölgesi için 1em aşağıda düğmenin sağ alt köşesi:
Yatay Konum Gölge Kutusu: 2px Dikey Konum Gölge Kutusu: 2px Gölge Renk: #332Faf Konum Durum Kutusu:
Özel bir bölücü ile bir çizgi ekleyin, işler biraz ilginç hale geliyor. Sayfamıza istediğimiz her yerde böcekleri ekleyebiliriz. İşin püf noktası, benzersiz bir tasarım oluşturmak için bölme arka plan gradyanını kullanmaktır. İlk olarak, bölücüyü satırımızın sol sütunundaki görüntü modülünün hemen üzerine ekleyelim. Ardından aşağıdaki ayarları güncelleyin: Sol renk gradyan arka plan düğmesi: #EDF000 Sağ renk gradyan arka plan düğmesi: RGBA (255,255,255,0) gradyan yönü: 90 derece Başlangıç Pozisyonu:% 1 Nihai Konum:% 0% 0
Dikey Bırakma Çizgisini Ekleyin Bu son aşama, o bölüme akan bazı ek dikey çizgiler getirerek tasarıma son bir dokunuş ekleyecektir. Bunu yapmak için, dört sütunlu yeni bir satır yapmamız ve satır ayarlarını aşağıdaki gibi güncellememiz gerekir: Özel genişlik:% 95 Özel Dolgu: 0px üst, 0px alt, sonra tüm tabletler için özel dolguyu güncelleyin … Sütun 1 Palding ( tablet):% 20 sağ sütun 2 dolgu (tablet):% 15 sağ sütun 1 dolgu (tablet):% 30 sağ sütun 1 dolgu (tablet):% 20 Bu sol, sütun olduğunda dikey böceği dengeleyecektir (eklenmez) hücresel ekranda istiflenmiştir. Şimdi bölücü modülümüzü eklemeye hazırız. Bölme modülünü ilk sütuna ekleyin ve aşağıdaki ayarları güncelleyin: Divisor’u Göster: Sol Gradyan Renk Arka Plan: RGBA (255,255,255,0) Sağ Renk Gradyan Arka Plan: #EDF000 Yükseklik: 100 Piksel Geniş: 2 Piksel Modül Hizalama: Sağ Özel Kesar (Sağ Özel Kesar ( Masaüstü): -300px üst, 300 piksel alt özel kenar (tablet): 0px üst, 0 piksel aşağıda
Şimdi yaptığınız modülü kopyalayın ve ikinci sütuna ekleyin. Ardından aşağıdakileri güncelleyin: Gradyan Arka Planın Sol Renk: #EDF000 Sağ Renk Gradyan Arka Plan: #332Faf Son Konum:% 40 Yükseklik: 300 piksel modül hizalama: Orta Ardından, ilk sütundaki bölücüleri üçüncü sütuna kopyalayın ve yapıştırın ve aşağıdakileri güncelleyin: Modül hizalaması: Orta özel kenar (masaüstü): 0px özel marj (tablet): -200px üst Şimdi modülü ikinci sütuna kopyalayın ve dördüncü sütuna yapıştırın ve aşağıdakileri güncelleyin: Arka plan gradyanının sol rengi: #332FAF Sağ renk gradyan Arka Plan: #EDF000 Nihai Konum:% 100 Yükseklik: 200px özel marj (tablet): -200px üstü. Sonuç’a bakın.
Ve bu tablet ve akıllı telefondaki görünüm … Yeterli çizgi değil mi? Bölücü modüllerinizin her birine bir kutunun gölgesi ekleyerek sayfanıza her zaman daha fazla satır ekleyebilirsiniz. Bu, istediğiniz yere temel olarak bir çizgi yerleştirmenizi sağlayacaktır. İşin püf noktası, kutu gölgenizin konumunu dış gölgeye ayarlamak, istediğiniz rengi seçmek ve ardından sayfanın herhangi bir yerine konumlandırmaktır. Sağ sütundaki üst bölücü modülüne kutunun ne tür bir gölgesini görün … Son zihin Bir tasarım inşa ederken, ilk amacım, divi öncesi divi düzenlerinden birinde parçaya çizgiler eklemenin tüm olası yollarını keşfetmektir. Bazıları olduğunu buldum! Ve bölücü modülünde sunulan esnek tasarım seçeneği ile sınırsız olması muhtemeldir. Umarım, bu yazı, Divi’yi inanılmaz yeni bir şekilde en üst düzeye çıkarmanıza yardımcı olacak tasarım ekipmanı kutunuzda birkaç araç daha sunar. Yorumlarda sizden haber almayı umuyorum.
