Kalın web sitesi yapmak için 7 teknik & amp;Divi ile renkli
Web siteniz için cesur ve renkli bir tasarım stili kullanmak, web sitenizi öne çıkarmanın iyi bir yoludur. Bu, web sitenize olumlu titreşimler getirmenize yardımcı olacaktır ve herhangi bir web sitesine göre olmasa da, birçoğu için uygun olmalıdır. Bu yazıda, yalnızca varsayılan Divi seçeneklerini kullanarak cesur ve renkli bir web tasarımının nasıl oluşturulacağına dair 7 farklı divi tekniği göstereceğiz. İlk olarak, farklı teknikleri tartışacağız ve bundan sonra açıklamaya uygun olarak bir örnek oluşturacağız. Bu, 4 farklı web sitesini işlediğimiz ve Divi’yi kullanarak nasıl başaracağımız olan gönderi dizisindeki son gönderidir:
Temiz ve Soyut
Asgari
Düz
Kalın ve renkli
Haydi Yapalım şunu! YouTube kanalımıza abone olun. Cesur ve renkli bir web tasarımı oluşturmak için kullanabileceğiniz ilk teknik sütunla satırı ‘değiştir’ ‘satırları çeşitli parçalara dönüştürmektir. Parçalar ve satırlar arasındaki tüm varsayılan dolguları kaldırarak, ikisi arasında net bir fark bırakmayacaksınız. Bu, olukların genişliğini kaldırarak bir kombinasyonda, birbirine basılan iki sütuna sahip olmanızı sağlar.
Böcek Yüksekliği: 900 piksel
Flip bölücü: dikey
Bölme Ayarları: Altını doldurun
Alt bölücü, benzer bir alt bölücü ekleyerek devam eder.
Bölme Stili: Listede bulun Renk Renk: RGBA (0.0,0,0.13)
Böcek Yüksekliği: 900 piksel
Bölme Ayarları: Altını doldurun
Bir sonraki mesafe, marj verin ve varsayılan dolguyu silin.
Üst ve Alt Marj: 50 piksel Sol ve sağ kenar boşluğu: 50px
Üst ve Alt Dolgu: 0px
Sol ve sağ dolgu: 0px
Yuvarlak açı daha sonra sınır ayarlarını açın ve birkaç yuvarlak açı ekleyin.
Sol üst: 20 piksel Sağ üst: 20 piksel
Kutumuzun gölgesi, aşağıdaki ayarları yaparak parçamızın üstünde pürüzsüz bir kutu gölgesi kullanır: Dikey Konum Gölge Kutusu: -23px
Bulanık Güç Gölgesi Kutusu: 37px Kutunun gölgesinin dağılımının gücü: -29px
Gölge Rengi: RGBA (0.0,0,0.22)
Kutu Gölgesi Pozisyonu: Dış Gölge
Ayarları değiştirmeyi bitirdiğimiz yerine sütun yapısının yeni bir satırı ekleyin, iki sütunlu satır ekleyerek devam edebiliriz.
Sütun 1 Gradyan Arka Plan herhangi bir modül eklemeden satır ayarlarını açacağız. Orada yapmamız gereken ilk şey, gradyanın arka planını ilk sütunumuza eklemektir.
Renk 1: RGBA (255,191,0,0,76) Renk 2: RGBA (153,0,255.0.87) Sütun 1 Arka plan resmi Bu gradyanın arka planını dokulu bir arka planla birleştireceğiz. Kullandığım resim Divi Meetup Düzen Paketinin bir parçası. Aşağıdaki görüntüyü sağa tıklayıp kaydederek masaüstünüze kaydedin (bu beyaz bir dokuya sahip bir PNG dosyasıdır, bilgisayarda açana ve/veya web sitenizde kullanana kadar görünümü göremezsiniz) :
Medya kitaplığınıza resim yükledikten sonra, Sütun 1 arka plan görüntüsünün boyutu olarak ‘uygun’u seçtiğinizden emin olun.
Sütun 2’nin arka plan rengi, ikinci sütuna ‘#f7f7f7’ arka plan rengini verin. Yapıştırıcımız, parçanın tüm genişliğini karşılamasını sağlayarak hattımızı kısmen ‘değiştirecektir’. Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Mesafe Sıralarla birlikte parçanın tüm genişliğini alarak, parçalarımızın üst ve alt pedlerini de çıkarmamız gerekiyor.
Bölücü modülünü Sütun 1’e ekleyin Bölücüyü gizle Modül eklemeye başlayın! İhtiyacımız olan ilk şey ilk sütundaki bölücü modülü. Bu modülü yalnızca ilk sütunda ihtiyacımız olan alanı yapmak için kullanırız. Aslında bunun görünmesini istemiyoruz. Bir modül ekledikten sonra, ‘bölücü göster’ seçeneğini devre dışı bıraktığınızdan emin olun.
Bir sonraki boşluk aralığını açın ve bölücüye aşağıdaki özel dolguyu ekleyin: Üst Pilding: 200px (masaüstü ve tablet), 150 piksel (cep telefonu)
Aşağıda dolgu: 200px (masaüstü ve tablet), 150 piksel (cep telefonu) Sütun 2’ye Metin Modülü #1 ekleyin Bir kopya ekleyin Şimdi ikinci sütuna devam edebiliriz. Burada, üç farklı metin modülümüzden üçünü bırakacağız ve her iki sütunda örtüşmesini sağlayacağız. Modülü iki veya daha fazla sütunla örtüşmek istiyorsanız, her zaman sağdaki sütuna yerleştirmeniz gerekir. Hiyerarşik yapı böyle çalışır. İlk metin modülünüzü ekleyin ve bazı kopyalar ekleyin. Metin Ayarları Sonraki metin ayarlarını açın ve aşağıdaki değişiklikleri uygulayın:
Metin yazı tipi ağırlığı: çok kalın
Metin yazı tipi stili: büyük harf
Metin rengi: #000000
Metin Boyutu: 250 piksel (masaüstü), 200px (tablet), 100 piksel (telefon)Hat yüksekliği metni: 0.75EM
Mesafemizin de bazı marjlara ihtiyacı olacak. Kullandığımız negatif sol marj, seçtiğimiz kopyayla eşleşir. Başka metinlerle de çalışmasını sağlamak istiyorsanız, bu değerle oynamanız gerekir. Sütun geçişine paralel karakterin başlangıcına bakana kadar değiştirin. Üst uyarıcı: 200px (masaüstü), -250px (tablet), -120px (telefon)
Sol kenar boşluğu: -279px (masaüstü),% 5 (tablet ve cep telefonu)
Klon metin modülü iki kez klon #1 metin değiştirme ilk metin modülümüzü yaptık ve zaman kazanmak için iki kez klonlayacağız ve bazı değişiklikler yapacağız. İkinci metin modülü hakkında değiştirmeniz gereken ilk şey kopya.
Burada kullandığımız kopyanın kopyasını değiştirin farklıdır, bu da sol kenar boşluğunu değiştirmemiz gerektiği anlamına gelir. Metin modülünü mükemmel bir şekilde paralel hale getirmek için ondalık sayıları nasıl kullandığımıza dikkat edin. Üst kenardan da kurtulun. Sol kenar boşluğu: -360.7px (masaüstü),% 5 (tablet ve cep telefonu)
Klon #2 Metin Değiştirme Değişikliği Üçüncü Metin Modülünüzün bir kopyasını da değiştirin.
Metnin rengini değiştirin ve tasarımı daha belirgin hale getirmek için bu modülün rengini ‘RGBA (0.0,0,0.0.19)’ olarak değiştireceğiz. Bu modül için üst kenar boşluğunu silmek için alanımızı değiştirin ve bunun yerine alt kenar boşluklarından bazılarını ekleyin. Negatif sol marj da farklıdır. Alt kenar boşluğu: 200px
Sol kenar boşluğu: -410px (masaüstü),% 5 (tablet ve cep telefonu) Standart Bölüm #2’yi ekleyin Mesafe parçamızı ayarlama ilk bölümle tamamlandı, bir sonraki bölüme geçme zamanı! Yeni bir standart bölüm ekledikten sonra, alan ayarlarını açın ve aşağıdaki değişiklikleri yapın: Üst ve Alt Marj: 50 piksel Sol ve sağ kenar boşluğu: 50px
Üst ve Alt Dolgu: 0px
Sol ve sağ dolgu: 0pxsudut yuvarlak Birkaç yuvarlak yuvarlak açı ekleyerek devam edin: Sol alt: 20 piksel
Sağ alt: 20 piksel
Kutunun gölgesi kutu gölgesini de altına ekler.
Dikey Konum Gölge Kutusu: 47px
Bulanık Güç Gölgesi Kutusu: 37px Kutunun gölgesinin dağılımının gücü: -29px
Gölge Rengi: RGBA (0.0,0,0.22)
Kutu Gölgesi Pozisyonu: Dış Gölge Bir sonraki sütun yapısının yeni bir satırını ekleyin, yeni bölümünüze üç sütunlu satır ekleyin.
Yapıştırıcımız da bu satırı kısmen ‘değiştirdi’:
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet Mesafe ve üst ve alt dolgu varsayılanını sileceğiz. Üst ve Alt Dolgu: 0px
Sütun 1’e Blurb #1 modülünü ekleyin, toplam bir simge seçin, üç bulanık modüle ihtiyacımız olacak. Her sütun için bir tane. İlk sütunda bir tane ekleyerek başlayacağız ve bitirdikten sonra klonlayacağız ve kalan sütuna yerleştireceğiz. Bu, zamandan tasarruf etmemize yardımcı olacaktır. İçeriği bulanıklık modülünüze ekledikten sonra, görüntü ayarları ve simgelerindeki seçim simgesini seçin.
Arka Planımız Gradyanımız, bunun için gradyanın arka planını kullanarak bulanıklık modülünün üst kısmındaki üst üste binen bir simge gibi görünmesini sağlayacaktır:
Renk 1: RGBA (255,255,255.0)
Renk 2: #A21DF9 Başlangıç Pozisyonu:% 20
Son pozisyon:% 20 Doku arka plan görüntüsümüz, gradyanın arka planını bir önceki bölümde kullandığımızla aynı dokulu arka planla birleştirir. Ikon Ayarları Bir sonraki simge ayarlarını değiştirin:
Renk simgesi: #000000
Simge yazı tipi boyutu kullanın: evet
İkon yazı tipi boyutu: 85px
Metin ayarlarını değiştirerek metin ayarlarına devam edin. Metin Oryantasyonu: Orta Metin Rengi: Işık Başlık Metin Ayarları Daha sonra, açıklama başlığımızı düzenlemek için aşağıdaki ayarları kullanacağız:
Ağır yazı tipi başlığı: Ultra Kalın
Metin yazı tipi stili: büyük harf
Başlık Metin Boyutu: 46px İçindekiler için gövde metni ayarları ve aşağıdaki ayarlar:
Vücut ağırlığı: ışık
Vücut Metin Boyutu: 18px Son fakat en az değil, özel rulmanlar ekleyerek bulanık modülümüze nefes alacağız:
Üst dolgu: 50 piksel
Dolgu Alt: 100 piksel
Sol ve sağ dolgu: 50px Blurb Modül Klonunu İki kez klon ve kalan kolon klonuna yerleştirin #1 Blurb modülünü değiştirmeyi tamamladıktan sonra simgeyi değiştirin, iki kez klon. Bunu yaptıktan sonra, kalan sütuna kopya yerleştirin. Ardından, ikinci sütununuzdaki bulanıklık modülünü açın ve kullanılan simgeyi değiştirin.
Gradyanın arka planını değiştirin İkinci gradyan arka plan rengini ‘#d47a9a’ olarak değiştirerek devam edin.
Klon #2 Simgeyi değiştirin Son sütunda bulanık modül için de aynısını yapın. Bu modül için gradyanın arka planını değiştirin, ikinci gradyanın arka plan rengi olarak ‘#f3bf3e’ kullanıyoruz.
Önizleme Yukarıdaki her adımı izlediyseniz, farklı ekran boyutlarında aşağıdaki sonuçları elde etmelisiniz:
Bu yazıdaki son zihin, yalnızca Divi varsayılan seçeneğini kullanarak nasıl cesur ve renkli bir web sitesi oluşturacağınızı gösterdik. İlk olarak, işleyebileceğiniz birkaç divi tekniğinden geçtik ve bundan sonra başlangıçtan itibaren uygun bir örnek verdik. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
