Divi ile Web Sitenize Materyal Tasarımı Ekleme

Materyal Tasarımı, dokunsal öğeleri (dokunma duyusuna dayalı) gerçek dünyanın ve ötesindeki teknolojik olanaklarla birleştirme çabasıyla 2014 yılında Google tarafından icat edildi. Kullanıcıların kağıt ve mürekkep gibi şeylere aşinalığından yararlanır ve hareket ve gölgeler gibi bilimsel gerçekleri ekler. Hatta teknolojinin ve bilimin gerçek dünyadaki sınırlamalarını, fizik kurallarını esnetecek ama çiğnemeyecek kadar genişletir. Sonuç, aynı anda hem tanıdık hem de büyülü bir tasarımdır.

Malzeme tasarımının bazı ortak unsurları arasında anlamlı geçişler (veya hareket), ışık ve gölge kullanımı, ızgara düzenleri ve koyu renkler bulunur. Bu öğelerin web sitenizin genel tasarımını ve kullanıcı deneyimini ne kadar kolay iyileştirebileceği şaşırtıcıdır.

Bugün size Divi oluşturucu ve biraz CSS kullanarak birkaç malzeme tasarımı öğesini web sitenize nasıl uygulayacağınızı göstereceğim.

Başlayalım.

Divi ile Web Sitenize Materyal Tasarımı Ekleme

Youtube Kanalımıza Abone Olun

Divi ile Materyal Tasarımı Uygulamak

Bugünün tasarımında, kullanıcıyı cezbetmek için beyaz bir arka plan üzerinde koyu renkler ve resimler kullanıyorum. Ayrıca, kullanıcının daha fazla ilgisini çekmek için belirli öğelerin üzerine gelindiğinde gölgeler ve hareket ekliyorum. Her ikisi de harekete geçirici mesajla alakalı olduğundan, resim ve içerik arasındaki çizgiyi aşan bir düğme ekliyorum. Ve son olarak, onları bilerek doğru yöne "işaret eden" düğme simgesine küçük bir hareket ekledim. Tüm bu unsurlar malzeme tasarımı ile uyumludur ve kolayca uygulanır.

Kullanılan tasarım öğeleri, unsplash.com'dan alınan görüntülerdir. Başlık resmi 1288 piksel genişliğe ve 737 piksel yüksekliğe sahiptir. Dört kutu görüntüsü 800 piksel genişliğinde ve 450 piksel yüksekliğindedir. Tasarımın geri kalanı Divi oluşturucu ve özel CSS aracılığıyla gerçekleştirilir.

Başlığı Tasarlamak

Divi Builder'da gösterilen varsayılan standart bölümü kullanarak tam genişlikte bir sütun ekleyin.

Bölüm modülü ayarlarına tıklayın. Genel Ayarlar altında, arka plan resminizi ekleyin.

Ardından, Satır Modülü Ayarlarına tıklayın, ona özel bir dolgu verin:

Üst: 150 piksel
Alt: 50 piksel

Gelişmiş Tasarım Ayarları altında, -100 piksellik özel bir alt kenar boşluğu ekleyin.

Kaydet çık

Bu bölüm yalnızca arka plan olarak hizmet vereceğinden herhangi bir modül eklemenize gerek yoktur.

Şimdi Divi Builder'ı kullanarak başka bir standart bölüm ekleyin ve ona tam genişlikte bir sütun verin. Ardından Satır Modülü Ayarları'na tıklayın.

Genel Ayarları aşağıdaki gibi değiştirin:

Özel Genişlik Kullan: Evet
Özel Genişlik: 700 piksel
Özel Dolgu: Üst 50 piksel ve Alt 50 piksel

Gelişmiş Tasarım Ayarları altında, satıra aşağıdaki gibi özel bir kenar boşluğu verin:

Üst: -144 piksel
Alt: 0 piksel
Arka Plan Rengi: #ffffff

Özel CSS sekmesi altında, Ana Öğe metin kutusuna aşağıdaki CSS'yi ekleyin:

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23), 0 6px 20px rgba(0, 0, 0, 0.16);

Kaydet çık

Ardından satıra bir metin modülü ekleyin. Genel Ayarlar altında, içeriğinizi İçerik kutusuna ekleyin. Başlığınızı bir h1 etiketine sardığınızdan emin olun. İşte şunu ekliyorum (html girerken metin sekmesini seçtiğinizden emin olun):

<h1 style="text-transform: captialize;">Material Design</h1>
Aenean consectetur ipsum ante, vel egestas enim tincidunt quis.

Gelişmiş Tasarım Ayarları altında aşağıdakileri değiştirin:

Başlık Yazı Tipi: Kalın (B)
Başlık Yazı Tipi Boyutu: 40 piksel;
Başlık Metni Rengi: #e91e63
Başlık Harf Aralığı: 2px

Artık başlığınız bitti.

Sütunları ve İçerik Kutularını Tasarlama

Başlık yerleştirildikten sonra, sütunlarınızı ve içerik kutularınızı eklemenin zamanı geldi.

İlk önce bir buçuk, bir buçuk sütun düzenine sahip standart bir bölüm ekleyin

Bölüm ayarlarını düzenleyin. Genel Ayarlar altında, özel dolgu seçeneğini aşağıdaki gibi değiştirin:

Üst: 0 piksel
Sağ: 20 piksel
Sol: 20 piksel

Şimdi Satır Modülü Ayarları'na tıklayın. Gelişmiş Tasarım Ayarları altında, Sütun Yüksekliklerini Eşitle seçeneğini bulun ve “EVET” olarak değiştirin. Boşluk için sütunlarınızın her birine 20 piksellik bir alt dolgu eklemek de iyi bir fikirdir.

Özel CSS sekmesine gidin ve bu Satır Modülüne "materyal" adı verilen özel bir CSS sınıfı verin. Bu, daha sonra ekleyeceğimiz tüm özel css öğelerimiz için tanımlayıcımız olacaktır. Bu, tasarım öğelerinin site genelinde değil, yalnızca "materyal" sınıfını eklediğiniz yerde uygulanması için önemlidir.

Kaydet çık

Artık sıranıza modüller eklemeye başlayabilirsiniz. Üst üste yığılmış 3 modül eklemek istiyorum: bir görüntü modülü, bir düğme modülü ve bir metin modülü. Önce satırın sol yarım sütununa bir görüntü modülü ekleyin.

Görüntü Modülü Ayarlarında, Genel Ayarlar altında aşağıdakileri değiştirin/ekleyin:

Resim Yükle/Girin
Resmin Altındaki Boşluğu Kaldır: Evet
Animasyon: Fade In
Görüntü Hizalama: Merkez

Kaydet çık

Görüntü Modülünün altına bir düğme modülü ekleyin. Genel Ayarlar altındaki düğme modülü ayarlarını aşağıdaki gibi değiştirin:

Düğme URL'si: [url girin] (Şimdilik sadece # koyuyorum)
URL Açılır: Yeni Sekmede
Düğme Metni: Daha Fazla
Düğme Hizalama: Merkez

Gelişmiş Tasarım Ayarları altında aşağıdakileri değiştirin:

Düğme için Özel Stilleri Kullan: Evet
Düğme Metin Boyutu: 24px
Düğme Metin Rengi: #ffffff;
Düğme Arka Plan Rengi: #e91e63
Düğme Kenar Genişliği: 0
Düğme Sınır Yarıçapı: 0
Düğme Simgesi Ekle: Evet
Düğme Simgesi: Daire içine alınmış Chevron aşağı simgesi (aşağı bakan bir ok simgesi seçtiğinizden emin olun)

Son olarak, düğme modülünün altına bir Metin Modülü ekleyin.

Metin Modülü ayarlarına gidin. Genel Ayarlar altında, Metin Yönünü Orta olarak değiştirin ve içerik bölümüne içeriğinizi girin.

Gelişmiş Tasarım Ayarları altında, metin modülünüze aşağıdaki gibi bazı özel dolgular verin:

Üst: 10 piksel
Sağ: 10 piksel
Alt: 10 piksel
Sol: 10 piksel

Kaydet çık

Ardından, az önce oluşturduğunuz görüntü, düğme ve metin modüllerini çoğaltacak ve bunları satırın sağdaki yarım sütununa sürükleyeceksiniz.

Modüllerinizi çoğalttıktan sonra, devam edin ve yinelenen satır simgesini seçerek iki sütun satırını çoğaltın.

Şimdi düzeniniz şöyle görünmelidir:

Geri dönün ve modüllerinizin içeriğini web siteniz için neye ihtiyacınız varsa onu değiştirin.

Özel CSS Ekleme

Bir sonraki adım, bu ek malzeme tasarım öğeleri için özel CSS eklemektir. Divi → Tema Seçenekleri'ne gidin ve Özel CSS metin kutusuna aşağıdaki css'i ekleyin:

.material .et_pb_image {
overflow: hidden;
}
.material .et_pb_column img{
vertical-align:top;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.material .et_pb_column:hover img{
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.material .et_pb_button_module_wrapper {
margin-top: -26px;
margin-bottom: 10px !important;
}
.material .et_pb_button {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);

}
.material .et_pb_button:hover {
    box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);
margin-top: -5px;
margin-bottom: 5px !important;

}
 
.material .et_pb_button:hover:after {
line-height: 1.7em;   
-webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
  
.material.et_pb_row {padding: 27px 15px;}
 

.material .et_pb_column {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
    -webkit-transition: all .2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

}

.material .et_pb_column:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23), 0 6px 20px rgba(0, 0, 0, 0.16);

}

Değişiklikleri kaydedin ve nihai sonucu kontrol edin.

Birkaç ipucu

Beyaz bir arka plan üzerinde koyu renklerin kullanımına ek olarak, artık "malzemenin" kullanıcı için canlanmasına yardımcı olan küçük bir ekstra hareketiniz var. Dört sütun kutusunun her biri, üzerine gelindiğinde artan hafif bir dinlenme yüksekliğine (gölgeleme yoluyla) sahiptir. Düğme, görüntüyü ve içeriği birleştirir ve 5 piksel yukarı hareket ettikçe üzerine gelindiğinde daha da artan bir dinlenme yüksekliğine sahiptir. Ayrıca düğmenin üzerine gelindiğinde düğme simgesi aşağıyı işaret ederek sağa doğru 90 derece saat yönünün tersine döner. Ayrıca, sütun kutusunun üzerine gelindiğinde görüntü yakınlaştırılır.

Geçişlerin ve hareketlerin her birinin amaçlı ve hızlı olduğuna dikkat edin. Kişinin dikkatini çekecek kadar tutarlı, ancak kullanıcı deneyiminin sürekliliğini bozmayacak kadar hızlı olmalıdırlar.

Bu tasarımın düzeni söz konusu olduğunda, öne çıkan portföyler, öne çıkan hizmetler veya CTA'lar gibi bir dizi farklı şey için if kullanabilirsiniz. Gökyüzü sınırdır.

Kutulara ek içerik eklemek isterseniz, gölgeleme ve fareyle üzerine gelme efekti sütun düzeyinde yapıldığından bunu kolayca yapabilirsiniz. Sütunlarınıza ek modüller eklemeniz yeterlidir. İsterseniz satırınıza daha fazla sütun da ekleyebilirsiniz. Üç sütun düzeni harika görünüyor.

Kutuların arka planını değiştirmek isterseniz, Gelişmiş Tasarım Ayarları altındaki Satır Modülü Ayarları'na giderek her sütun için arka plan rengini değiştirebilirsiniz.

Son düşünceler

Materyal tasarım uzmanı değilim, ancak bu konuda daha fazla şey öğrenmekten ve bir fırsat geldiğinde tasarım öğelerini uygulamaktan zevk alıyorum. Materyal tasarımı hakkında daha fazla bilgi için https://material.io/ adresini ziyaret edebilirsiniz. Kullanışlı bir renk paleti de var.

Umarım bu öğreticiyi faydalı bulmuşsunuzdur. Aşağıdaki yorumlarda sizden haber bekliyorum.