Divi ile web sitenize malzeme tasarımı ekleyin
Malzeme tasarımı, 2014 yılında Google tarafından dokunsal unsurları (dokunuş duygusuna dayanarak) gerçek dünya teknolojisi olasılığı vb. Kullanıcı yakınlığını kağıt ve mürekkep gibi şeylerle kullanır ve hareketler ve gölgeler gibi bilimsel gerçeklik ekler. Teknoloji ve bilimin gerçek dünya sınırlarını çözmek bile sadece bükmek için yeterlidir, ancak fizik kurallarını ihlal etmez. Sonuç yakın ve büyülü bir tasarımdır. Malzeme tasarımının bazı genel unsurları arasında geçişlerin (veya hareketlerin) anlamlı kullanımı, ışık ve gölge kullanımı, kafes düzeni ve cesur renk bulunmaktadır. Bu öğelerin web sitesi kullanıcısının genel tasarımını ve deneyimini ne kadar kolaylaştırabileceği gerçekten şaşırtıcı.
Bugün, bir divi üreticisi ve küçük bir CSS kullanarak web sitenize bazı malzeme tasarım öğeleri nasıl uygulanacağınızı göstereceğim. Başlayalım. Web sitenize YouTube kanallarına abone ile malzeme tasarımları eklemek Divi ile malzeme tasarımları uyguluyoruz
Kullanılan tasarım öğesi unssplash.com’dan bir görüntüdür. Başlık görüntülerinin genişliği 1288px ve yüksekliği 737px’dir. 800 piksel genişlik kutularının dört resim 450px yükseklik. Tasarımın geri kalanı özel bir Divi ve CSS üreticisi aracılığıyla tamamlandı. Divi Builder’da gösterilen varsayılan standart bölümü kullanarak başlığı tasarlama, tam geniş sütunu girin. Modül Ayarları bölümüne tıklayın. Genel ayarların altında, arka plan görüntüsünüzü girin. Ardından satır modülü ayarlarına tıklayın, özel bir ped verin: Üst: 150 piksel aşağıda: 50px Gelişmiş tasarım ayarlarının altında, -100 piksel özel bir alt marj ekleyin. Kaydet ve Çıkış Bu bölüm sadece bir arka plan olarak işlev göreceğinden, herhangi bir modül eklemenize gerek yoktur. Şimdi Divi Builder kullanarak başka standart parçaları ekleyin ve tam geniş bir sütun verin. Ardından satır modülü ayarlarını tıklayın. Genel ayarları aşağıdaki gibi değiştirin: Özel genişliği kullanın: Evet Özel Genişlik: 700px Patma Özel: 50px üst ve 50 piksel aşağıda Gelişmiş tasarım ayarlarının altında, aşağıdaki gibi özel bir marj çizgisi verin: Üst: -144px daha düşük: 0px arka plan rengi: #ffffff Özel CSS sekmesinin altında, ana öğe metin kutusuna aşağıdaki CSS ekleyin: Box-Shadow: 0 6px 20px RGBA (0, 0, 0, 0.23), 0 6px 20px RGBA (0, 0, 0.16); Kaydet ve Çıkış ardından metin modülünü satıra ekleyin. Genel ayarların altında, içeriğinizi içerik kutusuna ekleyin. Başlığınızı H1 etiketi ile sardığınızdan emin olun. Eklediğim şey bu (HTML girerken metin sekmesini seçtiğinizden emin olun):
Malzeme Tasarımı
Aenean Kavram Ipsum ante, Egestas Egesta Egestas Tincidunt Quis.Gelişmiş Tasarım Ayarları altında aşağıdakileri değiştirin: Kopyala Yazı Tipi: Kalınlık (B) Yazı tipi Boyutunu Kopyala: 40px; Renkli Tajuk Metin: #E91E63 Başlık Harf Aralığı: 2px Şimdi başlığınız tamamlandı. Kolonlar ve içerik kutuları tasarlama gölgelik yüklendikten sonra, şimdi sütun ve içerik kutunuzu ekleme zamanı. Önce standart kısmı bir buçuk, bir buçuk sütun bir düzen ile ekleyin Bölüm ayarlarını düzenleyin. Genel ayarlar altında, özel yatak seçeneğini aşağıdakilere değiştirin: Üst: 0px Sağ: 20 piksel sol: 20px Şimdi satır modülü ayarlarını tıklayın. Gelişmiş tasarım ayarları altında, Sütun Yükseklikleri Eşitleştirme seçeneğini arayın ve “Evet” e geçin. Bu aynı zamanda, yer için sütunlarınızın her birine 20 piksel altında dolgu eklemek için iyi bir fikirdir. Özel CSS sekmesini açın ve bu satır modülüne “Malzeme” adlı özel bir CSS sınıfı verin. Bu, daha sonra ekleyeceğimiz tüm özel CSS öğelerimiz için kimliğimiz olacak. Bu, tasarım öğelerinin tüm sitelere uygulanmaması için değil, yalnızca “malzeme” sınıfını eklediğiniz yerlerde önemlidir. Kaydet ve Out şimdi satırınıza modül eklemeye başlayabilirsiniz. Birbiriyle istiflenmiş 3 modül girmek istiyorum: görüntü modülleri, düğme modülleri ve metin modülleri. Önce görüntü modülünü satırın yarım sol sütuna ekleyin. Görüntü modülü ayarlarında, genel ayarların altında, aşağıdakileri değiştirin/ekleyin: Resmi yükleyin/girin Şekil altındaki alanı silin: Evet Animasyon: Güçlendirme Görüntü: Orta Orta
Görüntü modülünün altına kaydedin ve çıkın, düğme modülünü ekleyin. Genel ayarların altındaki düğme modülünün ayarlarını aşağıdaki gibi değiştirin: URL düğmesi: [url girin] (şimdilik sadece # yerleştiriyorum) URL Açık: Yeni Sekme Metin Düğmesi: Diğerleri Düğme: Orta Gelişmiş Tasarım Ayarları Altında , aşağıdakileri değiştirin: Düğme için özel bir stil kullanın: evet düğmenin metin boyutu: 24px metin renk tuşları: #ffffff; Düğmenin arka plan rengi: #E91E63 Sınır Border Genişliği Anahtar Düğmesi: 0 RADIUS Sınır: 0 Düğme simgesini ekleyin.
Son olarak, metin modülünü düğme modülünün altına ekleyin. Metin modülü ayarlarını açın. Genel ayarlar altında, metnin yönünü ortaya değiştirin ve içeriğinizi içerik bölümüne girin. Gelişmiş Tasarım Ayarları altında, metin modülünüze aşağıdaki gibi özel bir yatak verin: Üst: 10 piksel sağ: 10 piksel dip: 10 piksel sol: 10px Kaydet ve Çıkış Sonraki, yeni oluşturduğunuz resimleri, düğmeleri ve metin modüllerini çoğaltır ve satır sütununun sağ yarısına sürüklersiniz. Modülünüzü çoğalttıktan sonra, yinelenen satır simgelerini seçerek iki sıra sütunu tekrarlayın ve çoğaltın. Şimdi düzeniniz şöyle görünecek:Modül içeriğinizi web siteniz için istediğiniz her şeye geri döndürün ve değiştirin. CSS Custom Ekle Bir sonraki adım, ek malzeme tasarım öğeleri için özel bir CSS eklemektir. Divi’yi açın → Tema seçeneği ve CSS Kustom metin kutusuna aşağıdaki CSS’yi ekleyin: .et_pb_image { Taşma: gizli; }
.et_pb_column img {
Dikey-High: Top;
-Webkit-Transition: Tüm .2S kolaylığı;
-Moz-Transition: Tüm 0.2s kolaylığı; -ms-Transition: Tüm 0.2s kolaylığı;
-O-geçiş: tüm 0.2s kolaylığı;
Geçiş: Tüm 0.2s kolaylığı;
}
.et_pb_column: hover img {
-Webkit-Transform: Ölçek (1.05);
-MS-Transform: Ölçek (1.05);
Dönüşüm: Ölçek (1.05);
}
.et_pb_button_module_wrapper {
Marj -TOP: -26px;
Marj-Alt: 10 piksel! Önemli;
}
.et_pb_button {
Box-Shadow: 0 3px 10px RGBA (0, 0, 0, 0.23), 0 3px 10px RGBA (0, 0, 0.16);
}
.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);
Marj -TOP: -5px;
Marj-Alt: 5 piksel! Önemli;
}
.et_pb_button: hopl: {sonra {
Çizgi yüksekliği: 1.7em;
-Webkit-Transform: Rotate (-90deg);
Dönüşüm: döndür (-90deg);
}
Material.et_pb_row {dolgu: 27px 15px;}
.et_pb_column {
Box-Shadow: 0 3px 10px RGBA (0, 0, 0, 0.23), 0 3px 10px RGBA (0, 0, 0.16);
-Webkit-Transition: Tüm .2S kolaylığı;
-Moz-Transition: Tüm 0.2s kolaylığı;
-MS-Transition: Tüm 0.2s kolaylığı;
-O-geçiş: tüm 0.2s kolaylığı;
Geçiş: Tüm 0.2s kolaylığı;
}
.et_pb_column: hover {
Box-Shadow: 0 6px 20px RGBA (0, 0, 0, 0.23), 0 6px 20px RGBA (0, 0, 0.16);
}
Değişiklikleri kaydedin ve sonucu görün.
Beyaz arka planda cesur renkler kullanmanın yanı sıra bazı ipuçları, şimdi “malzeme” nin kullanıcılar için canlı olmasına yardımcı olan küçük bir hareketiniz var. Dört sütun kutusunun her biri, yüzerken artan hafif bir dinlenme yüksekliğine (gölgelerden) sahiptir. Düğme görüntüleri ve içeriği taşır ve 5 pikselin üstüne geçerken yüzerken dinlenme yüksekliğinde bir artışa sahiptir. Ayrıca imleci düğmeye işaret ederken, saat çalışmasının karşısındaki dönen düğmenin simgesi, sağa doğru işaret eder. Ve imleci sütun kutusuna yönlendirilirken görüntü genişletilir. Her geçiş ve hareketin hızlı olduğunu ve hızlı olduğunu unutmayın. Birinin dikkatini çekecek kadar tutarlı olmalıdırlar, ancak kullanıcının deneyiminin sürdürülebilirliğine müdahale etmeyecek kadar hızlıdır. Bu tasarım düzenine gelince, üstün portföyler, üstün hizmetler veya CTA gibi birkaç farklı şey için kullanabilirsiniz. Gökyüzü onun sınırıdır. Kutuya ek içerik eklemek istiyorsanız, gölge efekti ve imlecin sütun düzeyinde yapıldığı için kolayca yapabilirsiniz. Sütununuza ek bir modül ekleyin. İsterseniz satırınıza daha fazla sütun da ekleyebilirsiniz. Üç sütunun düzeni harika görünüyor. Kutunun arka planını değiştirmek istiyorsanız, gelişmiş tasarım ayarlarının altındaki satır modülü ayarlarını açabilir ve her sütun için arka plan rengini değiştirebilirsiniz.
