Divi’de geometrik ızgara düzeni nasıl tasarlanır
Web siteniz için geometrik kutu düzenini tasarlamak çok güzel olabilir. En sevdiğim geometrik tasarım öğelerinden biri altıgen. Altıgen dengeli ve uyumlu bir kutu düzeni tasarlamak için kullanılabilir (arı kovanı hakkında düşünün). Ancak tasarım zorluklarla gelebilir. İçeriğiniz için bir arka plan olarak kullanılacak bir şekil yaptınız. Ardından içeriğinizi formda ayarlamanız gerekir. Ardından, şekillerin farklı ekran boyutlarına doğru bir şekilde yerleştirildiğinden emin olmalısınız. Ama endişelenme. Bu düşündüğünüz kadar zor değil.
Geometrik bir şekil yapmak için, bazı özel CSS gelişmiş kullanarak bunu yapmanın birkaç yolu vardır, ancak bence en basit yol görüntü yapmaktır. Sonra divi gücünü geri kalanı için kullanabilirsiniz. Bu öğreticide, geometrik kutunun düzenini divi ile tasarlamak için bir altıgen şekli yapmanın ne kadar kolay olduğunu göstereceğim. Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız geometrik ızgara tasarımına bir bakış.
Altıgen görüntü oluşturmak için fotoğraf editörü (bir eskiz kullanacağım). Ya da şimdilik, bu görüntüyü masaüstüne sürükleyip kullanmanız yeterlidir. Divi teması (yüklü ve aktif)
Altıgen Arka Plan Görüntüsü Yaparak Altıgen arka plan görüntüsü yapmak için, bir Sketch fotoğraf düzenleyicisi kullanacağım (yalnızca MAC için). Bununla birlikte, bu, orada bir dizi fotoğraf editöründe (Photoshop, Illustrator veya GIMP gibi) yapılması kolay bir form olmalıdır.
Bu öğretici bölümüyle uğraşmak istemiyorsanız, şimdilik bu görüntüyü her zaman masaüstünüze sürükleyebilirsiniz. Bu, onun arkasındaki arka plan renginin görülmesine izin vereceğini hatırlayan bir dizi tasarımla çalışması gereken yarı saydam bir altıgen görüntüdür. Bir eskizde nasıl görüntü yapacağınız aşağıda açıklanmıştır. İlk olarak, sağ üstteki ekleme simgesini tıklayın. Ardından imleci şekil seçeneğine yönlendirin ve altıgen şeklini seçin. Şimdi kaydırma düğmesini basılı tutun ve tuvalinize tıklayın (ve basılı tutun) ve şekli yapmak ve farenizi çıkarmak için fareyi sürükleyin. Vardiyayı tutmak, şekliniz için mükemmel kare boyutu yapmanızı sağlar. Şimdi şekil özelliğinizi sağ taraftaki aşağıdaki gibi güncelleyin: Boyut: Genişlik 360, Yükseklik 360 Yan: 6 Renk İçeriği: 000000 Hex, 0 R, 0 g, 0 B, 30 A (temelde bu%30’luk bir opaklık ile siyahtır)
Ardından görüntünüzü PNG olarak dışa aktarın ve daha sonra için WordPress Media Kütüphanenize içe aktarın. Üç tasarım sütunu ile ilk kısmı yapmak, her biri farklı sütun yapımızı tutan bir satıra sahip olmak üzere üç kazık parçasına sahip olacaktır. İlk bölümde üç sütunumuz olacak, ikinci bölümde iki sütun ve üçüncüsü yalnızca bir sütun olacaktır. İlk bölümü oluşturmak için yeni bir sayfa oluşturun ve başından itibaren yeni bir düzen oluşturmak için görsel bir yapımcı uygulayın. Yeni düzenli bölüm sizin için yapılacaktır ve görsel üreticiniz sizden sütun yapısını seçmenizi isteyecektir. Üç katlı bir yapı seçin (üçte birinin üçte biri). Şimdi çizgilerimizi düzenlemeye ve modülümüzü eklemeye başlamadan önce, ayarları aşağıdakilerle güncelleyerek arka plan renk gradyanının bir kısmını verelim: #2B87DA Sağ renk arka plan gradyanı: RGBA (0,0,0 , 0.6) Sıra ayarlarını ayarlayın ve aradığımız tasarımı elde etmek için sütununuzun arka planına altıgen görüntüler ekleyin, arka plan görüntülerimizi üç sütununun her sütununa eklememiz gerekir. Bu nedenle, her sütun için, her sütuna bir altıgen görüntü (360px kat 360 piksel olmalıdır) ekleyin. Ardından arka plan görüntüsünün boyutunu “gerçek boyut” olarak ayarlayın ve arka plan görüntüsünü “tekrarlama yok” olarak tekrarlayın. Sütun 1, 2 ve 3’ün arka plan görüntüleri için emin olun ve bunu yapın. Ardından, her sütunda doğru şekilde görüntülenmesi için ihtiyacımız olan mesafeyi sağlamak için hat ayarlarımızı ayarlamamız gerekir. Bu mesafe aynı zamanda her şeyin duyarlı kalmasına ve mobil cihazlarda yatay alanı en üst düzeye çıkarmaya yardımcı olacaktır. Satır ayarlarını aşağıdaki gibi güncelleyin: Özel genişliği kullanın: Evet Birim: % Özel Genişlik: % 100 Özel Oluklar Kullanın Genişlik: Evet Talang Genişliği: 2 Eşit Sütun Yüksekliği: Evet Özel dolgu (masaüstü): 0px üst, 0px alt,% 10 sol,% 10 sağ dolgu özel (tablet):% 0 sol,% 0 sağ Şimdilik satır ayarlarınızı kaydedin. Her sütuna bulanık modülünüzü ekleyin Birinci sütununa yeni bir açıklama modülü ekleyin ve açıklama ayarlarını aşağıdaki gibi güncelleyin: “İçeriğiniz burada. Bu metni sırayla veya modül içerik ayarlarında düzenleyin veya silin. ” (Bu kısa oluşturun çünkü Yalnızca Altıgen Görüntünüzde Sınırlı Alanınız Var) Simgeyi kullanın: Evet Simgeyi seçin (istediğiniz her kişi açıktır) ve tasarım ayarlarını aşağıdaki gibi güncelleyin: #66D1FF YAZI TONU BOYUT BOYUT ICON: 66PX Metin Oryantasyonu : Orta Renk Metin: Genişlik Işık: 360px (İşaretler Ayar Görüntüünüzle Aynı Genişlik) Hizalama Modülü: Özel Dolgu: 85px üst, 85px alt,% 10 sol,% 10 sağ önemlidir, Hexagon önce sizden şimdi tam bir arka plan görüntüsünü ortaya çıkarmak için modülünüzün mesafesini nasıl ayarlayacağınız için. Üst ve alt dolguyu 85 piksel eklediğimi unutmayın. Bu, tarayıcıyı mobil cihazın boyutuna ayarlarken bile altıgen arka planı ortaya çıkarmak için yeterlidir. Açıklama modülünüzü kaydettikten sonra, üç açıklamanın mevcut olması için kopyalayıp sütun 2 ve 3’e yapıştırın. Şimdi, tanımımızın ilk satırına ilk satırda arka plan eklemeyi başardık.
İkinci parçamızı yapmak, ilk bölümü devam ettirmek ve çoğaltmak için ikinci kısmı iki sütunla yapın, ardından aşağıdaki arka plan renginin ayarlarını güncelleyin: RGBA (0,0,0,0.0.6) ve mevcut gradyanları silin. Ardından, satır sütununuzun yapısını iki sütuna değiştirin ve sağ alt sütundaki ek modülleri silin.
Satır ayarlarını aşağıdaki gibi güncelleyin: Talang genişliği: 3 özel marj (masaüstü): -145px özel kenar boşluğu (tablet): -70px üst özel dolgu (masaüstü):% 24 sol,% 24 sağ sola ve sola daha fazla dolgu ekliyorum Üstteki açıklama arasında bir altıgen arka planı konumlandırmak için doğru (her iki tarafta% 24 dolgu bizi yeterince kapatır). Ayrıca, daha fazla dolgu sırası nedeniyle azaltılmış sütun boşluğunu karşılamak için oluk geri 3’ün genişliğini değiştirdim. Sonra satırı biraz yukarı çekmek için -145px marjını kullandım. Gördüğünüz gibi, ızgara düzeni kaynaşmıştır. Üçüncü bölümü son bölüm için bir sütunla yapın, parçayı çoğaltmaya devam edin. Ardından ilk bölüme gidin ve arka plan gradyanını kopyalayın ve az önce yaptığınız üçüncü bölüme yapıştırın. Ardından, imleci gradyan renk önizlemesine yönlendirirken “Anahtarlama” simgesini tıklayarak degradeyi açın. Ardından üçüncü bölümdeki arka plan rengini silin.Şimdi satır sütun yapısını bir sütuna güncelleyin ve ek açıklama modüllerini silin. Daha küçük bir tarayıcı penceresindeki diğer açıklamalarla deşarj için bir altıgen görüntüsünün arka planını elde etmek için satıra daha fazla dolgu eklememiz gerekir. Bu, altıgen görüntüsünü diğerlerine uyacak şekilde hafifçe entegre edecektir. Bu, tasarımı daha tutarlı hale getirmek için sadece küçük bir detaydır. Satır ayarlarında, özel dolguyu şu şekilde güncelledi: Özel dolgu (masaüstü):% 37 sol,% 37 sağ
Şimdi geometrik ızgara düzenimizin nihai sonucuna bakalım. Cep telefonunda aşağıdaki görünüm. Farklı ekran boyutlarına nasıl ayarlanacağınız aşağıda açıklanmıştır.
