Divi ile benzersiz bir çerçeve tasarımı oluşturmak için yeniden kullanılabilecek düzen
Divi ile çizginiz için benzersiz bir çerçeve tasarımı oluşturmak, sayfa içeriğinizi yaratıcı bir şekilde görüntülemenin yararlı (ve eğlenceli) bir yolu olabilir. Divis bölünme divi’yi özlü bir sıra yapısıyla birleştirerek, içeriğinizi çerçevelemek için sayısız tasarım olasılığını keşfedebilirsiniz. Önceki öğreticide veya daha önce yapılmış olan bazı düzenlerimizde görüntülenen bu tekniği görmüş olabilirsiniz. Ancak, bugün, bu tasarım tekniğinin kendisini keşfetmenin kolay bir yolunu göstereceğim. Bu öğreticide, size kütüphanenize saklanabilecek yeniden kullanılabilecek parçaların düzenini oluşturmanın hızlı bir yolunu göstereceğim. Ardından, yeni çerçeve tasarımını ve yeni bir renk şemasını keşfetmek için düzeni kullanabilirsiniz. Düzen, satırlarınızı benzersiz bir tasarımla çerçeveleyerek çalışır, böylece tüm sütun yapıları ve modülleri satırlarda kullanılabilir.
Başlayalım. Başlamak için yeniden kullanılabilecek bir çerçeve tasarım düzeni yapın, bir sütun düzeni ile yeni bir parça oluşturalım. Şu anda herhangi bir modül eklememize gerek yok. Bunun yerine, önce çizgiler ve parçalarımızı tasarlayacağız, böylece satırlarımızı daha sonra istediğimiz içerikle doldurabiliriz. Satır Güncelleme Tasarım Satır Ayarları Aşağıdaki gibi: Arka Plan Rengi: #333333 Satır İstihdamı: Özel Genişlik Merkezi: 775px Talang Genişliği: 2 Özel Dolgu: 130px yukarı, 130px aşağı, 50px sol, 50px sağ özel kenar boşluğu: 0px üst, 0px aşağıda
Ardından, düzenin adını girin (“Çizgi Çerçevesinin Düzeni” gibi) ve kütüphaneye kaydet düğmesini tıklayın. 1 numaralı kare tasarımını tamamlayın, gelecekteki çabalar için depolanan parçaların düzenini aldıktan sonra, ilk tasarım örneğini tamamlamak için satırımıza biraz içerik ekleyelim. Bu tasarım için sütun yapısını değiştirerek, altı sütun resim galerisi eklemek iyi olacak. Küçük sütun yapısı, dar bir çizgide iyi çerçevelenmiş küçük bir görüntü grubu yapmamızı sağlayacaktır. Bunu yapmak için, önce satırın yapısını altı sütun düzenine değiştirin.
Satıra içerik ekleyin ve ardından her sütuna üç görüntü modülü (resimlerle) ekleyin. Çeşitli boyutlarda/boyutlara sahip daha fazla portre oryantasyonu (manzaralar yerine) olan görüntüler kullanıyorum. İşte son tasarım. Boru bonusu tasarımı Daha olası tasarımları keşfetmeye devam etmeden önce, çerçevenizi sayfanın bir tarafına genişletmek için kolay hileler göstermek istiyorum. Bunu yapmak için, bölüm ayarlarını açın ve arka plan gradyanını aşağıdaki gibi ekleyin: Sol arka plan gradyan rengi: #333333 Sağ renk gradyan arka plan: #ffffff gradyan yönü: 90 derece Başlangıç Pozisyonu:% 50 Nihai Pozisyon:% 0 Bu tasarıma bakın.
Çeşitli çerçeve tasarımları için düzenin ayarlanması ve bu basit düzenden ilginç içerik olasılığı en azından çok fazladır. Renk şemasını, bölücü stilini, sütun düzeni ve modül içeriğini ayarlayarak, her türlü farklı düzen tasarımını yapabilirsiniz. Ayrıca, çeşitli tıklamalarda büyük bir renk şemasında değişiklik yapmak için “Bul ve Değiştir” gibi serin divi özelliklerini kullanabilirsiniz. İşte düzeni güncellemek için temel bir süreç: Sayfanın depolanan kısmının düzenini yükleyin
“Bul ve Değiştir” kullanarak renk şeması bölümünü güncelleyin.
Bölme kuvvetini değiştir
Arka plan ve yeni sütun yapısı ile satır özelleştirme.
Modülü sütununuza ekleyin
Bu süreçle, yeni tasarımları keşfetmek oldukça eğlenceli olmalı! Devam edelim. Bu sonraki tasarım için #2 çerçeve tasarımı, daha önce yaptığımız depolanan parçaların düzenini kullanacağız. Bunu yapmak için görsel yapımcıya yeni bir parça eklemek için tıklayın. Ardından Kütüphane Ekle sekmesini seçin ve listenin listesinin düzenini tıklayın. Şimdi yeni tasarım için bölümü ayarlamaya hazırız. Bu düzen için kullanılan renk şemasını değiştirmek için, bulgu ve değiştirme özelliklerini kullanarak bazı Divi tasarım kuvvetlerini çağırabiliriz. Yinelenen parçaların ayarlarını açın ve arka plan rengini sağlayın ve “Bul ve Değiştir” i seçin.
Capital Find & Change’da aşağıdakileri güncelleyin: In: Bu bölüm aşağıdakilerle değiştirin: #443850 Tümünü seçin
Bu, arka plan, sınır ve bölücüler için kullanılan beyaz rengi yeni renklerle değiştirecektir. Şimdi parçanın ayarlarını yeni bir bölücü stiliyle güncelleyin: Ardından satır ayarlarını beyaz arka plan rengi ve satır için yeni çerçeve tasarımını tamamlamak için kutunun gölgesini güncelleyin. İçerik için, çeşitli açıklamalarla beş sütunun düzenini deneyelim. Devam edin ve satırınızın beş sütunun düzeni olması için sütun düzenini güncelleyin. Ardından ilk sütuna kısa bir açıklama ekleyin. Varsayılan içerik metnini kaldırın ve yalnızca başlık metnini bırakın. Ardından bulanıklık görüntüsünü bir yıldız simgesi ile değiştirin. Tasarım ayarlarını aşağıdaki gibi güncelleyin: Renk simgesi: #7D8491 Yazı Tipi Boyutu simgesi: 80px Metin Oryantasyonu: Orta Açıklama modülünü iki katına çıkarın ve ayarları aşağıdaki gibi güncelleyin: Renk simgesi: #8CD845 Ikon Yazı Tipi Boyutu: 50px Şimdi iki modülü kopyalayın ve kopyalayıp, her sütunda üç modülle sütunlarınızın beşinde de desene yapıştırın. Aşağıdakiler son tasarımdır. Tasarım Çerçevesi #3 Üçüncü çerçeve tasarımı için, önce depolanan parçaların düzenini daha önce ikinci tasarım için yaptığımız gibi yüklememiz gerekir. Bundan sonra, arka plan, bölücü ve sınır için kullanılan beyaz rengi değiştirmek için arka plan renginde (önceki tasarımda yaptığımız gibi) bulabilir ve değiştirebiliriz. Bunu yapmak için Ayarlar bölümünü açın, arka plan rengini sağlayın ve Bul ve Değiştir’i seçin. Ardından aşağıdakileri güncelleyin: In: Bu bölümün değiştirilmesi: #1E3888 Tümünü seçin
Ardından bölücüyü üst ve alt bölücü kuvveti (bulutlar) ile güncelleyin: Ardından, çizgi ayarlarına gidin. Gradyanın arka plan satırını aşağıdaki gibi verin: Degrade Arka Planın Sol Renk: Varsayılan ( #2B87DA) Sağ Renk Gradyan Arka Plan: #1E3888 (parçanın arka planı ile aynı renk)) Nihai Konum:% 83 (gizlemek için satırın kenarı biraz) Şimdi, yapmamız gereken çerçeveli çizgimize biraz içerik eklemek. Satıra hareket etmek için davet modülünü ekleyelim ve ayarları aşağıdaki gibi güncelleyelim: Düğmeyi görüntülemek için bağlantı giriş kutusuna “#” ekleyin Arka plan rengini kullanın: Hayır
Metin Renk Başlığı: #FFC338 Metin Renk Düğmesi: #FFC338 İşte son tasarım. Cep telefonuna ne dersin? Eğer merak ediyorsan. İşte mobil cihazlarda bir tasarım ekranı.
