Divi ile Cesur ve Renkli Web Siteleri Oluşturmak için 7 Teknik

Web siteniz için cesur ve renkli bir tasarım stili kullanmak, web sitenizi öne çıkarmanın harika bir yoludur. Web sitenize olumlu bir hava getirmenize yardımcı olacaktır ve herhangi bir web sitesine uymasa da kesinlikle çoğuna uyacaktır.

Bu yazıda, yalnızca Divi'nin yerleşik seçeneklerini kullanarak nasıl cesur ve renkli web tasarımı oluşturabileceğinizi anlatan 7 farklı Divi tekniğini göstereceğiz. İlk önce farklı teknikleri inceleyeceğiz ve ardından açıklamaya uyan bir örnek oluşturacağız.

Bu, 4 farklı web sitesi stilini ve bunlara Divi kullanarak nasıl ulaşılacağını ele aldığımız gönderi dizisindeki son gönderi:

1. Temiz ve Soyut
2. En az
3. Düz
4. Cesur ve Renkli

Hadi hadi bakalım!

Youtube Kanalımıza Abone Olun

1. Satırları Sütunlu Bölümlere 'Dönüştür'

Cesur ve renkli web tasarımı oluşturmak için kullanabileceğiniz ilk teknik, satırları bölümlere dönüştürmektir. Bir bölüm ve satır arasındaki tüm varsayılan dolguyu kaldırarak, ikisi arasında belirgin bir fark bırakmayacaksınız. Bu, oluk genişliğinin kaldırılmasıyla birlikte, birbirine bastırılmış iki sütuna sahip olmanızı sağlar.

2. Gradyanlar + Arka Plan Dokuları

Web sitenizde gradyan arka planları kullanmak çarpıcı sonuçlar verebilir. Ancak bu renkleri güçlendirmenize yardımcı olan şey, onları dokulu bir arka planla birleştirmek. Dengeyi korumak için bu kombinasyonu yalnızca bir sütun için kullanın. Modern bir dokunuş için ikinci sütunu temiz ve hafif tutun.

3. Yarı Saydam Degrade Renkler + Bölüm Bölücüler Altında

Bir satırı bölüme dönüştürdükten sonra, sütun arka planınıza bölüm ayırıcılar da ekleyebilirsiniz. Bölücülerin içeriğin üst üste gelmeden göründüğünden emin olmak için sütununuz için hafif şeffaf degrade renkler kullanın.

4. Modüllerin Yatay Sütun Örtüşmesi

Web sitelerinin genellikle dikey örtüşme kullandığını görürsünüz. Öte yandan, yatay örtüşme, kesinlikle çarpıcı sonuçlar getirebilmesine rağmen daha az kullanılır. Bu tür bir sonuca ulaşmak için, sağ sütundaki öğelerin sol sütundaki öğelere göre hiyerarşik bir avantajı olduğunu bilmek önemlidir. Öğelerinizi sol sütuna yerleştirirseniz aynı sonucu elde edemezsiniz.

5. Mükemmel Hizalama için Kopyayı Bölün

Mükemmel hizalamaya sahip olmaktan daha tatmin edici bir şey yoktur. İyi tasarımı kötü tasarımdan ayıran temel tasarım ilkelerinden biridir. İki sütunu üst üste bindirirken bu hizalamanın mükemmel olduğundan emin olmak için kopyanızı farklı Metin Modüllerine bölmeyi deneyin. Bu, özellikle soldaki negatif kenar boşluğunun o kelime veya cümleyle eşleşmesini sağlayarak mükemmel bir hizalama oluşturmanıza olanak sağlayacaktır.

6. Siyah ve Yarı Saydam Metin Renklerini Birleştirin

Web sitenize kalın bir görünüm eklemek için, paylaştığınız kopya için büyük bir yazı tipi boyutu ve ultra kalın bir Metin Yazı Tipi Ağırlığı kullanın. Cesurluğu dengelemek için siyah metin rengi ile yarı saydam renk arasında geçiş yapabilirsiniz. Bu, web sitenizde yeterli derinlik ve çeşitlilik oluşturmanıza yardımcı olacaktır.

7. Bölümleri Birleştirmek için Üstte veya Altta Kutu Gölgesinden Kaçının

Kutu gölge seçenekleriyle oynayarak sayfanızdaki iki bölümü kolayca birleştirebilirsiniz. İlk önce, çok ince bir kutu gölgesi kullanın. Bu, yeterli bulanıklık gücü, negatif yayılma gücü ve çok hafif bir kutu gölge rengi kullanmak anlamına gelir. İnce kutu gölgenizi oluşturduktan sonra dikey konumla oynayın. Sayfanızdaki ilk bölüm için, bölümünüzün altında kutu gölgesi görünene kadar dikey konumu hareket ettirdiğinizden emin olun. Aynısı son bölüm için de geçerlidir, ancak bunun yerine üstte görünmediğinden emin olun.

Ön izleme

Artık tüm farklı teknikleri denediğimize göre, işleri uygulamaya koymanın zamanı geldi. Aşağıdaki tasarımı yeniden oluşturacağız:

Oluşturmaya Başlayalım: Standart Bölüm #1 Ekle

Bölüm Ayarları

Üst Bölücü

Standart bir bölümle yeni bir sayfa ekleyin ve bölüm ayarlarını hemen açın. İhtiyacımız olan ilk şey bir üst bölücü:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: rgba(0,0,0,0.13)
• Bölücü Yüksekliği: 900px
• Bölücü Çevirme: Dikey
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

Alt Bölücü

Benzer bir alt bölücü de ekleyerek devam edin.

• Bölücü Stili: Listede Bul
• Bölücü Rengi: rgba(0,0,0,0.13)
• Bölücü Yüksekliği: 900px
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

aralık

Ardından, bölüme biraz kenar boşluğu verin ve varsayılan dolguyu kaldırın.

• Üst ve Alt Kenar Boşluğu: 50px
• Sol ve Sağ Kenar Boşluğu: 50px
• Üst ve Alt Dolgu: 0px
• Sol ve Sağ Dolgu: 0px

Yuvarlatılmış köşeler

Ardından, Kenarlık ayarlarını açın ve bazı yuvarlatılmış köşeler ekleyin.

• Sol Üst: 20 piksel
• Sağ Üst: 20px

Kutu Gölge

Aşağıdaki ayarlamaları yaparak bölümümüzün üst kısmında ince bir kutu gölgesi kullanıyoruz:

• Kutu Gölge Dikey Konumu: -23px
• Kutu Gölge Bulanıklığı Gücü: 37px
• Kutu Gölge Yayılma Gücü: -29px
• Gölge Rengi: rgba(0,0,0,0.22)
• Kutu Gölge Konumu: Dış Gölge

Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarlarını değiştirmeyi bitirmedik, iki sütunlu bir satır ekleyerek devam edebiliriz.

Sütun 1 Gradyan Arka Planı

Henüz herhangi bir modül eklemeden satır ayarlarını açacağız. Orada yapmamız gereken ilk şey, ilk sütunumuza bir gradyan arka planı eklemek.

• Renk 1: rgba(255,191,0,0.76)
• Renk 2: rgba(153.0,255,0.87)

Sütun 1 Doku Arka Plan Resmi

Bu degrade arka planı dokulu bir arka planla birleştireceğiz. Kullandığım görüntü Divi'nin Meetup Layout Pack'inin bir parçası. Aşağıdaki resmi sağ tıklayıp kaydederek masaüstünüze kaydedin (beyaz dokulu bir png dosyasıdır, bilgisayarınızda açıp/veya web sitenizde kullanana kadar neye benzediğini göremezsiniz. ):

Resmi Medya Kitaplığınıza yükledikten sonra, Sütun 1 Arka Plan Resmi Boyutu olarak da 'fit'i seçtiğinizden emin olun.

Sütun 2 Arka Plan Rengi

Ardından, ikinci sütununuza '#F7F7F7' arka plan rengini verin.

boyutlandırma

Bölümün tüm genişliğini kaplayarak sıramızı bir bölüme 'dönüştüreceğiz'.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Satırın bölümün tüm genişliğini kaplamasının yanı sıra, bölümümüzün üst ve alt dolgusunu da çıkarmamız gerekecek.

• Üst ve Alt Dolgu: 0px

Sütun 1'e Bölücü Modülü Ekle

Bölücüyü Gizle

Modülleri eklemeye başlayalım! İhtiyacımız olan ilk şey, ilk sütundaki bir Bölücü Modül. Bu modülü yalnızca ilk sütunda ihtiyacımız olan alanı oluşturmak için kullanıyoruz. Aslında görünmesini istemiyoruz. Modülü ekledikten sonra, 'Bölücüyü Göster' seçeneğini devre dışı bıraktığınızdan emin olun.

aralık

Sonraki Aralık ayarlarına gidin ve ayırıcıya aşağıdaki özel dolguyu ekleyin:

• Üst Dolgu: 200 piksel (Masaüstü ve Tablet), 150 piksel (Telefon)
• Alt Dolgu: 200 piksel (Masaüstü ve Tablet), 150 piksel (Telefon)

Metin Modülü #1'i Sütun 2'ye ekleyin

Kopya Ekle

Artık ikinci sütuna geçebiliriz. Burada, üç farklı Metin Modülümüzü bırakacağız ve her iki sütunla örtüşmelerini sağlayacağız. Bir modülün iki veya daha fazla sütunla çakışmasını istiyorsanız, onu her zaman sağdaki sütuna yerleştirmeniz gerekir. Hiyerarşik yapı bu şekilde çalışır. İlk Metin Modülünüzü ekleyin ve biraz kopya ekleyin.

Metin Ayarları

Sonraki metin ayarlarını açın ve aşağıdaki değişiklikleri uygulayın:

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #000000
• Metin Boyutu: 250px (Masaüstü), 200px (Tablet), 100px (Telefon)
• Metin Satır Yüksekliği: 0.75em

aralık

Ayrıca biraz marja ihtiyacımız olacak. Kullandığımız negatif sol kenar boşluğu, seçtiğimiz kopyayla eşleşiyor. Bunun başka metinlerle de çalışmasını istiyorsanız, bu değerle oynamanız gerekir. Bir karakterin başlangıcının sütunların geçişiyle aynı hizada olduğunu görene kadar değiştirin.

• Üst Kenar Boşluğu: 200px (Masaüstü), -250px (Tablet), -120px (Telefon)
• Sol Kenar Boşluğu: -279 piksel (Masaüstü), %5 (Tablet ve Telefon)

Metin Modülünü İki Kez Klonla

Klon #1

Metni Değiştir

İlk Metin Modülümüzü oluşturduk ve biraz zaman kazanmak için onu iki kez klonlayacağız ve bazı değişiklikler yapacağız. İkinci Metin Modülü hakkında değiştirmeniz gereken ilk şey kopyadır.

Aralığı Değiştir

Burada kullandığımız kopya farklı, bu da sol kenar boşluğunu değiştirmemiz gerektiği anlamına geliyor. Metin Modülünün mükemmel şekilde hizalanması için ondalık sayıları nasıl kullandığımıza dikkat edin. Üst kenar boşluğundan da kurtulun.

• Sol Kenar Boşluğu: -360.7 piksel (Masaüstü), %5 (Tablet ve Telefon)

Klon #2

Metni Değiştir

Üçüncü Metin Modülünüzün kopyasını da değiştirin.

Metin Rengini Değiştir

Ve tasarımı daha da öne çıkarmak için bu modülün metin rengini 'rgba(0,0,0,0.19)' olarak değiştireceğiz.

Aralığı Değiştir

Bu modülün üst kenar boşluğunu kaldırıyoruz ve bunun yerine biraz alt kenar boşluğu ekliyoruz. Negatif sol kenar boşluğu da farklıdır.

• Alt Kenar Boşluğu: 200 piksel
• Sol Kenar Boşluğu: -410px (Masaüstü), %5 (Tablet ve Telefon)

Standart Bölüm #2 Ekle

Bölüm Ayarları

aralık

İlk bölümü bitirdik, bir sonrakine geçme zamanı! Yeni bir standart bölüm ekledikten sonra Aralık ayarlarını açın ve aşağıdaki değişiklikleri yapın:

• Üst ve Alt Kenar Boşluğu: 50px
• Sol ve Sağ Kenar Boşluğu: 50px
• Üst ve Alt Dolgu: 0px
• Sol ve Sağ Dolgu: 0px

Yuvarlatılmış köşeler

Bazı alt yuvarlatılmış köşeler ekleyerek devam edin:

• Sol Alt: 20px
• Sağ Alt: 20px

Kutu Gölge

Bölümün altına bir Kutu Gölgesi de ekleyin.

• Kutu Gölge Dikey Konumu: 47px
• Kutu Gölge Bulanıklığı Gücü: 37px
• Kutu Gölge Yayılma Gücü: -29px
• Gölge Rengi: rgba(0,0,0,0.22)
• Kutu Gölge Konumu: Dış Gölge

Yeni Satır Ekle

Sütun Yapısı

Ardından, yeni bölümünüze üç sütunlu bir satır ekleyin.

boyutlandırma

Bu satırı da bir bölüme 'dönüştürüyoruz':

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Ve varsayılan üst ve alt dolguyu kaldıracağız.

• Üst ve Alt Dolgu: 0px

Blurb Modülü #1'i Sütun 1'e ekleyin

Simge Seç

Toplamda üç Blurb Modülüne ihtiyacımız olacak. Her sütun için bir tane. İlk sütuna bir tane ekleyerek başlayacağız ve işimiz bittikten sonra onu klonlayıp kalan sütunlara 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ü ve Simge ayarlarında istediğiniz bir simgeyi seçin.

Degrade Arka Plan

Bunun için bir gradyan arka planı kullanarak, simgenin Blurb Modülünün üst kısmıyla örtüşüyormuş gibi görünmesini sağlayacağız:

• Renk 1: rgba(255,255,255,0)
• Renk 2: #A21DF9
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %20

Doku Arka Plan Resmi

Degrade arka planı, önceki bölümde kullandığımız dokulu arka planla birleştiriyoruz.

Simge Ayarları

Sonraki simge ayarlarını değiştirin:

• Simge Rengi: #000000
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 85px

Metin Ayarları

Metin ayarını değiştirerek devam edin.

• Metin Yönü: Merkez
• Metin Rengi: Açık

Başlık Metni Ayarları

Ardından, tanıtım başlığımızın stilini belirlemek için aşağıdaki ayarları kullanacağız:

• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Başlık Metin Boyutu: 46px

Gövde Metni Ayarları

Ve gövde metni için aşağıdaki ayarlar:

• Gövde Yazı Tipi Ağırlığı: Hafif
• Gövde Metni Boyutu: 18px

aralık

Son olarak, özel dolgu ekleyerek Blurb Modülümüze nefes alması için biraz alan vereceğiz:

• Üst Dolgu: 50px
• Alt Dolgu: 100px
• Sol ve Sağ Dolgu: 50px

Blurb Modülünü İki Kez Klonla ve Kalan Sütunlara Yerleştir

Klon #1

Simgeyi Değiştir

Blurb Module'ü değiştirmeyi tamamladığınızda, onu iki kez klonlayın. Bunu yaptıktan sonra, kopyaları kalan sütunlara yerleştirin. Ardından, ikinci sütununuzdaki Blurb Module'ü açın ve kullanılan simgeyi değiştirin.

Degrade Arka Planını Değiştir

İkinci degrade arka plan rengini '#D47A9A' olarak değiştirerek devam edin.

Klon #2

Simgeyi Değiştir

Son sütundaki Blurb Module için de aynı şeyi yapın.

Degrade Arka Planını Değiştir

Bu modül için bunun yerine ikinci degrade arka plan rengi olarak '#F3BF3E' kullanıyoruz.

Ön izleme

Yukarıdaki adımların her birini izlediyseniz, farklı ekran boyutlarında aşağıdaki sonucu elde etmiş olmalısınız:

Son düşünceler

Bu gönderide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak nasıl cesur ve renkli web siteleri oluşturabileceğinizi gösterdik. İlk olarak, üstesinden gelebileceğiniz bazı Divi tekniklerini inceledik ve ardından sıfırdan eşleşen bir örnek oluşturduk. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!