Divi'de Geometrik Izgara Düzeni Nasıl Tasarlanır

Web siteniz için bir geometrik ızgara düzeni tasarlamak olağanüstü derecede güzel olabilir. En sevdiğim geometrik tasarım öğelerinden biri altıgendir. Altıgenler, dengeli ve uyumlu ızgara düzenleri tasarlamak için kullanılabilir (arı kovanı düşünün). Ancak tasarım zorluklarla gelebilir. İçeriğiniz için arka plan görevi görecek şekiller oluşturdunuz. Ardından içeriğinizi şeklin içine sığdırmanız gerekir. Ardından, bu şekillerin farklı ekran boyutlarında doğru şekilde yerleştirildiğinden emin olmalısınız. Ama endişelenme. Düşündüğün kadar zor değil.

Bu geometrik şekilleri oluşturmaya gelince, bunu bazı gelişmiş özel CSS kullanarak gerçekleştirmenin yolları var, ancak bence en basit yol bir görüntü oluşturmak. Sonra geri kalanı için Divi'nin gücünü kullanabilirsiniz.

Bu derste size Divi ile geometrik bir ızgara düzeni tasarlamak için altıgen şekilli bir görüntü oluşturmanın ne kadar kolay olduğunu göstereceğim.

Başlayalım!

Gizlice Bakış

İşte bu derste oluşturacağımız geometrik ızgara tasarımına bir göz atın.

Neye ihtiyacın var

• Altıgen görüntü oluşturmak için bir Fotoğraf Düzenleyici (Sketki kullanacağım). Ya da şimdilik bu görseli masaüstünüze sürükleyip kullanabilirsiniz.
  
• Divi Teması (Yüklü ve Aktif)

Altıgen Arka Plan Görüntüsü Oluşturma

Altıgen arka plan görüntüsünü oluşturmak için fotoğraf düzenleyici Sketch'i kullanacağım (yalnızca Mac için). Ancak bu, herhangi bir sayıda fotoğraf düzenleyicide (Photoshop, Illustrator veya Gimp gibi) oluşturulması kolay bir şekil olmalıdır.

Öğreticinin bu kısmıyla uğraşmak istemiyorsanız, şimdilik bu resmi masaüstünüze sürükleyebilirsiniz. Arka plan renklerinin görünmesine izin vereceğini düşünerek bir dizi tasarımla çalışması gereken koyu yarı saydam bir altıgen görüntüdür.

Çizimde görüntünün nasıl oluşturulacağı aşağıda açıklanmıştır. İlk önce sağ üstteki ekle simgesine tıklayın. Ardından şekil seçeneğinin üzerine gelin ve altıgen şekli seçin.

Şimdi üst karakter tuşunu basılı tutun ve tuval üzerine tıklayın (ve basılı tutun) ve şekli oluşturmak için farenizi sürükleyin, ardından farenizi bırakın. Shift tuşunu basılı tutmak, şekliniz için mükemmel kare boyutlar oluşturmanıza olanak tanır. Şimdi sağ kenar çubuğunda şeklinizin özelliklerini aşağıdaki gibi güncelleyin:

Boyut: 360 genişlik, 360 yükseklik
Taraflar: 6
Dolgu rengi: 000000 hex, 0 R, 0 G, 0 B, 30 A (temelde bu, %30 opaklığa sahip siyah bir renktir)

Ardından, resminizi png olarak dışa aktarın ve daha sonra kullanmak üzere WordPress Medya Kitaplığınıza aktarın.

Üç Sütunlu İlk Bölümü Oluşturma

Bu tasarım, her biri farklı sütun yapılarımızı tutan bir sıraya sahip, birbirinin üzerine yığılmış üç bölüme sahip olacaktır. İlk bölüm üç sütunlu yapımıza sahip olacak, ikinci bölüm iki sütunlu ve üçüncüsü sadece bir sütunlu olacak.

İlk bölümü oluşturmak için yeni bir sayfa oluşturun ve sıfırdan yeni bir düzen oluşturmak için görsel oluşturucuyu dağıtın. Sizin için yeni bir normal bölüm oluşturulacak ve görsel oluşturucu, bölümünüz için sütun yapınızı seçmenizi isteyecektir. Üç sütun yapısını seçin (üçte bir üçte bir).

Şimdi satırımızı düzenlemeye ve modüllerimizi eklemeye başlamadan önce, bölüm ayarlarını aşağıdakilerle güncelleyerek bölümümüze bir arka plan rengi gradyanları verelim:

Arka Plan Gradyanı Sol Renk: #2b87da
Arka Plan Gradyanı Sağ Renk: rgba(0,0,0,0.6)

Satır Ayarlarını Özelleştirin ve Sütun Arka Planlarınıza Altıgen Görüntüler Ekleyin

Aradığımız tasarımı elde etmek için üç sütunlu satırımızın her sütununa arka plan resmimizi eklememiz gerekiyor. Bu nedenle, her sütun için altıgen resmi (360 piksel x 360 piksel olmalıdır) her sütuna ekleyin. Ardından arka plan görüntüsü boyutunu “gerçek boyut”a ve arka plan görüntüsü tekrarını “tekrar yok”a ayarlayın.

Sütun 1, 2 ve 3 arka plan resimleri için bunu yapın ve emin olun.

Ardından, altıgen arka plan resimlerimizin her sütunda doğru şekilde gösterilmesi için ihtiyacımız olan aralığı oluşturmak için satır ayarlarımızı özelleştirmemiz gerekiyor. Bu boşluk, aynı zamanda, şeylerin 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şlik Kullan: EVET
Birim: %
Özel Genişlik: %100
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 2
Sütun Yüksekliklerini Eşitle: EVET

Özel Dolgu (masaüstü): 0px Üst, 0px Alt, %10 Sol, %10 Sağ
Özel Dolgu (tablet): %0 Sol, %0 Sağ

Şimdilik satır ayarlarınızı kaydedin.

Blurb Modüllerinizi Her Sütuna Ekleme

İlk sütununuza yeni bir tanıtım yazısı modülü ekleyin ve tanıtım yazısı ayarlarını aşağıdaki gibi güncelleyin:

İçerik: “İçeriğiniz buraya gider. Bu metni satır içi veya modül İçerik ayarlarında düzenleyin veya kaldırın." (bunu kısa tutun çünkü altıgen görüntünüzde yalnızca sınırlı miktarda alanınız var)
Simgeyi Kullan: Evet
Simgeyi Seçin (açıkça istediğiniz herhangi biri)

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Simge Rengi: #66d1ff
Simge Yazı Tipi Boyutu: 66px
Metin Yönü: Merkez
Metin Rengi: Açık
Genişlik: 360 piksel (altıgen arka plan resminizle aynı genişlikte)
Modül Hizalaması: merkez
Özel Dolgu: 85px Üst, 85px Alt, %10 Sol, %10 Sağ

Önce altıgeninizin önüne görüntülenmesini istediğiniz içeriği eklemeniz önemlidir, böylece artık arka plan görüntüsünü tam olarak ortaya çıkarmak için tanıtım metni modülünüzün aralığını nasıl ayarlayabilirsiniz. Dikkat edin, 85 piksellik bir üst ve alt dolgu ekledim. Bu, tarayıcıyı mobil cihaz boyutlarına göre ayarlarken bile altıgen arka planı ortaya çıkarmak için yeterlidir.

Tanıtıcı modülünüzü kaydettikten sonra, bir kopyalayın ve her üç tanıtım yazısının da mevcut olması için 2. ve 3. sütuna yapıştırın.

Şimdi ilk tanıtım yazılarımıza başarılı bir şekilde altıgen arka planlar ekledik.

İki Sütunlu İkinci Bölümü Oluşturma

İkinci bölümümüzü oluşturmak için devam edin ve ilk bölümü çoğaltın, ardından bölüm ayarlarını aşağıdaki arka plan rengiyle güncelleyin: rgba(0,0,0,0.6) ve mevcut degradeyi silin.

Ardından satırınızın sütun yapısını iki sütun olarak değiştirin ve sağ alt sütundaki fazladan modülü silin.

Satır ayarlarını aşağıdaki gibi güncelleyin:

Oluk Genişliği: 3
Özel Kenar Boşluğu (masaüstü): -145 piksel Üst
Özel Kenar Boşluğu (tablet): -70px Üst
Özel Dolgu (masaüstü): %24 Sol, %24 Sağ

Altıgen arka planları yukarıdaki bölümdeki tanıtım yazıları arasına yerleştirmek için sola ve sağa daha fazla dolgu ekledim (her iki taraftaki %24 dolgu bizi oldukça yaklaştırıyor). Ayrıca, daha fazla satır dolgusu nedeniyle azalan sütun boşluğuna uyum sağlamak için oluk genişliğini tekrar 3'e değiştirdim. Sonra sırayı biraz yukarı çekmek için -145 piksellik bir kenar boşluğu kullandım.

Gördüğünüz gibi ızgara düzeni bir araya geliyor.

Tek Sütunlu Üçüncü Bölüm Oluşturma

Son bölüm için, bölüm bölümünü çoğaltın. Ardından ilk bölüme gidin ve arka plan gradyanını kopyalayın ve az önce oluşturduğunuz üçüncü bölüme yapıştırın. Ardından, degrade renk önizlemesinin üzerine geldiğinizde "anahtar" simgesine tıklayarak degradeleri çevirin. Ardından üçüncü bölümdeki arka plan rengini silin.

Şimdi satır sütun yapısını bir sütuna güncelleyin ve fazladan tanıtım modülünü silin.

Daha küçük tarayıcı pencerelerinde diğer tanıtım yazılarıyla ölçeklenecek altıgen görüntü arka planı elde etmek için satıra daha fazla dolgu eklememiz gerekiyor. Bu, altıgen görüntünün diğerleriyle eşleşmesi için biraz ezilmesini sağlayacaktır. Bu, tasarımı daha tutarlı hale getirmek için sadece küçük bir ayrıntıdır.

Satır ayarlarında özel dolguyu aşağıdaki gibi güncelleyin:

Özel Dolgu (masaüstü): %37 Sol, %37 Sağ

Şimdi geometrik ızgara düzenimizin nihai sonucunu kontrol edelim.

İşte mobilde nasıl göründüğü.

İşte farklı ekran boyutlarına nasıl ayarlandığı.

Son düşünce

Bu öğretici, sütunlarınıza altıgen şeklinde bir arka plan ekleyerek nasıl geometrik bir ızgara oluşturacağınızı gösterir, ancak istediğiniz herhangi bir arka plan görüntüsünü eklemek için aynı tekniği kolayca uygulayabilirsiniz. Bu, web sitenizi farklı kılmak için güzel düzenler tasarlamak için birçok kapı açar.

Umarım bir sonraki projeniz için faydalı bulursunuz ve yorumlarda sizden haber almak için sabırsızlanıyorum.

Şerefe!