Temiz tasarım elde etmek için 8 teknik & amp;Divi ile Özet
Web sitenizi takip etmek istediğinize karar vermek zaman alabilir. Takip edebileceğiniz tüm tasarım stillerini düşünmenize şaşmamalı. Seçtiğiniz stil, web sitenizin savaştığı her şeyin bir temsili olacak ve 2018’de tasarım trendlerine uymasını isteyeceksiniz. Bu yazı dizisinde, en popüler ve ilginç olanlardan bazılarını keşfedeceğiz. orada:
Temiz ve Soyut
Asgari
Düz
Kalın ve renkli
Her tasarım tarzı için, tasarım türünü çok kolaylaştıracak bazı divi tekniklerini tartışacağız. Temiz ve soyut bir tasarım tarzı ile başlayacağız. Görsel bir divi üreticisi kullanarak tasarım öğelerinize uygulayabileceğiniz 8 tekniği paylaşacağız ve bundan sonra en başından beri iki şaşırtıcı örnek alacağız!
Haydi Yapalım şunu! 1. Ana renkli parçaların arka plan renginden kaçının Çoğu durumda, ‘temiz’ terimi de çok fazla ‘beyaz’ anlamına gelir. Bu, genel olarak renklerden kaçınmanız gerektiği anlamına gelmez, ancak web sitenizin ana yapısal öğelerindeki (parçalar gibi) renklerden kaçınmak, ziyaretçilere temiz bir izlenim vermek için çok katkıda bulunabilir.
Metin Modülü Ekle #1 Arka Plan Rengi Şimdi, modül eklemeye başlayalım! Altyazılarla başlayacağız ve teknik numara 2’de belirtildiği gibi, bu modülün desenini beyaz arka plan rengi kullanarak kıracağız.
Metin Ayarları Bir sonraki metin ayarlarınızı açın ve aşağıdaki değişiklikleri uygulayın:
Metin yazı tipi ağırlığı: kalınlık Metin yazı tipi stili: büyük harf Metin rengi: #000000 Metin Boyutu: 18px
Metin mektubu alanı: 29px (tablet), 25px (tablet), 18px (cep telefonu)
Metin Oryantasyonu: Orta
Mesafe Desenimizin başlangıcı ve metin modülünün başlangıcı arasında biraz boşluk yapmak için, metin modülümüzün kenarına ‘100px’ ekleyeceğiz. Metin modülü ekleyin #2 metin ayarlarını önceki metin modülünün hemen altına ekleyin, devam edin ve yeni olanı ekleyin İstediğiniz başlık göster. Modül metin ayarlarınızı açın ve aşağıdaki değişiklikleri yapın:
Metin yazı tipi ağırlığı: çok kalın
Metin rengi: #000000
Metin boyutu: 200px (masaüstü), 130px (tablet), 100 piksel (telefon) Metin mektubu alanı: -6px Hat yüksekliği metni: 1em
Üçüncü ve son modül düğmesi modülü modülünü satırımıza ekleyin Düğme modülüdür. Bir kopya ekledikten sonra hizalama ayarlarını açın ve orta düğme hizalamasını kullanın.
Düğmeyi ayarlayın Düğmenizin görüntülenmesini değiştirmek için düğme ayarlarını açın ve aşağıdaki değişikliği uygulayın:
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 16px
Metin Renk Düğmesi: #fffffff
Gradyan yönü: 153 derece
Düğmenin sınır genişliği: 0px
Yarıçap düğmesi sınırı: 54 piksel
Mektup Ağırlığı: Çok kalın
Yazı tipi stili: büyük harf
Düğmenizde yeterli yastık vermek için mesafe, çekici ve okunan bir CTA yapmanın önemli bir parçasıdır. Düğme alanı ayarlarınızı açın ve aşağıdaki özel marj ve dolguyu uygulayın:
Üst ve Alt Marj: 100 piksel
Üst ve Alt Dolgu: 15px
Sol ve sağ dolgu: 40 piksel
Son fakat en az değil kutunun gölgesi, çekici bir tasarım oluşturmak için derinlik (tekniğe göre belirtildiği gibi) yapacağız: Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -7px
Kutu Gölgesi Rengi: RGBA (0.0,0,0.34)
Örnek #1: Ek Adımlar Sütun yapısının yeni bir satırını ekleyin Şimdi genel adımlardan geçtik, iki farklı örnek tek tek yapalım. İlk örnekte, aşağıdaki sütun yapısıyla aynı bölüme yeni bir satır ekleyerek başlayın: Yapıştırıcı Satır ayarlarınızı açın ve satır modülünüzü bırakın, aşağıdaki boyut ayarlarını kullanarak ekranınızın tüm genişliğini karşılıyor:
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Bölme modülünü ekleyin. Gradyan Arka Planımızın arka planını bölücümüz için kullanacağız: Gradyan Renk #1: #FD5056
Gradyan Renk #2: #BD3CB5
Gradyan yönü: 168deg
Bölme modülünü yapmak için mesafe önceki çizgi ve modülle örtüşüyor, üst kenar boşluğu için ‘-400px’ kullanacağız. Karanlık ve önceki satırdan metin modülünün başlığını hala görünür kılmak için filtre ayarlarındaki opaklığı ‘%43’ olarak ayarlayacağız. Son fakat değil -loveast kutusunun gölgesi, tasarımımızın derinliğini artırmak için pürüzsüz kutunun gölgesini uygulayacağız:
Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: 3px
Kutu Gölgesi Renk: RGBA (0.0,0,0.49) Örnek #2: Ek adımlar Metin Modülünün Alanını Değiştir #1 İkinci örnek için, ilk metin modülünden başlayarak mevcut modüllerde bazı değişiklikler yapmamız gerekir. Alan ayarlarını açın ve aşağıdaki özel marjı ekleyin: Alt kenar boşluğu: 150 piksel (telefon)
Alan Modülü Boşluğu #2 Bir sonraki ikinci metin modülünü açın ve aşağıdaki alan ayarlarını kullanın:
Alt kenar boşluğu: 150px (tablet ve cep telefonu) Metin düğmesinin rengini değiştirin, ardından modül düğmesini açın ve metin rengini ‘#bd3cb5’ olarak değiştirin.
Degrade düğmesinin arka planını silin ve bir sonraki düğme modülünüzün arka planını silin. Düğmenin arka plan rengini ekleyin ve bunun yerine beyaz arka plan rengini ekleyin. Mevcut modülü değiştirmeyi bitirdikten sonra gradyan arka planının yeni bir kısmını ekleyin, devam edebilir ve zaten var olan yeni bir parça ekleyebilirsiniz. Bölüm ayarlarınızı açın ve bunun için aşağıdaki gradyan arka planını kullanın:
Gradyan Renk #1: #FD5056 Gradyan Renk #2: #BD3CB5
Gradyan yönü: 165 derece Üst bölücü, bölümünüze en büyük bariyeri ekleyerek devam edin: Bölme Stili: Listede bulun Renk Renk: #ffffff Alt bölücü, alt bölücü için aynı ayarı kullanın.
Yeni rolünüz için yapmanız gereken son şeyin mesafesi, alan ayarlarını değiştirmektir:
Üst kenar: -460px
Alt kenar boşluğu: 100 piksel Üst ve Alt Dolgu: 0px
Geçerli sütun yapısının yeni bir satırı ekleyin, parçalarımızın tüm ekran boyutlarında görünmesini sağlamak için, görünür olmayan bölücü modülüne sahip satırlar ekleyeceğiz. Önce hattınızı ekleyerek başlayın:
Bölücü modülünü ekleyin Bölücü bir sonraki bölücü modülünüzü ekleyin ve görünürlük ayarlarında ‘göster’ göster ‘seçeneğini devre dışı bıraktığınızdan emin olun ve tamamlayın! Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım.
