Örtüşen ve Dikey Metin ile Yaratıcı Bir Görüntü Düzeni Nasıl Oluşturulur

İyi bir görüntü düzeninin veya ızgarasının organizasyonu hakkında güzel bir şey var. Ancak bazen güzellik, mükemmel simetrinin sınırlarının dışında bulunur. Pazarlamada kullanılan bu tür asimetrik dengenin örneklerini hepimiz gördük. Bunları restoran menülerinde, broşürlerde ve portföyleri ve galerileri olan sayısız web sitesinde bulabilirsiniz.

Bugün size Divi kullanarak kendi yaratıcı görüntü düzeninizi nasıl oluşturacağınızı göstereceğim. Konseptler dünyayı sarsacak (veya bu konuda benzersiz) değil, ancak bunun size kutunun dışında düşünmeniz ve harika görünen bir şey yaratmanız için ilham vereceğini umuyorum. Kusursuz simetriden kaçmak ve her şeyi karıştırmak isteyenler için, bu öğretici sizin için.

Tasarım Öğelerinin Hazırlanması

Bu düzeni oluşturmak için ihtiyacınız olacak:

1. Divi Temasının en son sürümü yüklü ve aktif
2. Ücretsiz Restoran Düzen Paketi'nin kopyası. Restaurant_Gallery.json dosyasını Divi Kitaplığına aktarın. Bu, yeni düzeni oluşturmaya başlamanıza yardımcı olacaktır.
3. Kendi resimlerinizi kullanmayı seçerseniz, boyutlarının en az 800×500 olduğundan emin olurum.

Görüntü Düzenini Oluşturma ve İçerik Ekleme

Bu benzersiz düzen, benzersiz bir tasarım süreci gerektirir. Bunu bir karalama defteri yapmak gibi düşünün. Her biri için doğru yeri bulmak için onları hareket ettirmeye başlamadan önce tüm parçalarımızı yerleştireceğiz. Bu süreç aynı zamanda tasarım sürecini daha fazla sahiplenmenize ve kendi içeriğinizi eklediğinizde her şeyi istediğiniz gibi değiştirmenize yardımcı olacaktır.

Bu nedenle, önce tüm satırlarımızı ve içeriğimizi (resimler, metin) eklemenin en iyisi olduğunu düşünüyorum. Bu, parçaları tasarlamaya başlamadan önce bütünü görselleştirebilmemiz için temel bir çerçeve sağlayacaktır.

Restoran Galeri Düzenini Kullanın

Yeni başlayanlar için yeni bir sayfa oluşturalım ve restoran galeri düzenini sayfaya yükleyelim. Düzenin bir üst bilgi ve bir alt bilgi bölümü vardır (bunu şimdi yalnız bırakacağız. Yeni düzenimize eklemek için dört (dört sütun) satırın her birinin içindeki görüntüleri kullanacağız. Görüntü modüllerinizi aşağıdakilerden oluşturmayı seçebilirsiniz. İsterseniz kazıyın.Bunu sadece süreci hızlandırmak için yapıyorum.

Mevcut içeriği (galerideki tüm resimler), yeni düzeninizi doldurmak için kullanabileceğiniz kaynaklar olarak düşünebilirsiniz.

İlk Bölüm İçeriğini Ekle

İki sütunlu (bir buçuk) sütun yapısına sahip yeni bir satırla yeni bir normal bölüm oluşturun. Ardından, mizanpajınızın başlık bölümünün hemen altına sürükleyin.

Yeni satırınızın ilk sütununda aslında bir resim modülü oluşturacağız ve medya galerimizden dikey bir resim alacağız (Bu, aşağıdaki mevcut içerikte bulunmayan tek resimdir).

Ardından, bir resmi doğrudan ilk sütundaki önceki resmin altına sürükleyin.

Ardından, ilk sütundaki ikinci görüntünün altına bir metin modülü ekleyin ve şimdilik aşağıdaki sahte metni ekleyin:

"Sed ut perspiciatis unde omnis iste natus hatası otur voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo mucit veritatis et quasi mimarıteaque ipsa quae ab illo mucit."

İçerik metniyle birlikte doğrudan bu metin modülünün altına başka bir metin modülü ekleyin: "Fırında"

Bu, ilk satırdaki ilk sütunla ilgilenir.

İlk satırın ikinci sütununa içerik metniyle bir metin modülü ekleyin: "Taze"

Ardından, alttaki mevcut içerikten bir görüntü modülünü doğrudan bu metin modülünün altına sürükleyin.

İlk sütundan iki metin modülünü kopyalayın ve resmin altındaki ikinci sütuna yapıştırın (paragraf kukla içeriğinin tek metin içeriğinin üzerinde kaldığından emin olun. Ardından "Fırında" kelimesini "Başlangıçlar" olarak değiştirin.

İkinci Bölüm İçeriğini Ekle

Ardından, az önce oluşturduğunuz bölümün altına yeni bir normal bölüm ekleyin. Tek sütunlu bir yapıya sahip bir satır verin.

Aşağıdaki mevcut içerikten iki görüntüyü (görüntü modülleri) yeni tek sütunlu satıra sürükleyin. Satırın tüm genişliğini kaplayacaklar. Sorun değil, boyutu ve konumu daha sonra ayarlayacağız.

Doğrudan öncekinin altına yeni bir satır ekleyin ve ona üç sütunlu (üçte bir üçte bir) yapı verin.

Aşağıdaki mevcut içerikten bir resmi ilk (en soldaki) sütuna sürükleyin.

İkinci (orta) sütuna, içerik metni olan bir metin modülü ekleyin: "Tatlılar"

Daha sonra ilk bölümde yer alan paragraf kukla metni ile metin modüllerinden herhangi birini kopyalayın ve “Tatlılar” metin modülünün altına yapıştırın.

Üçüncü (en sağdaki) satıra, içerik metni olan bir metin modülü ekleyin: "Kahve".

İkinci bölümün içeriği bu kadar.

Üçüncü Bölüm İçeriği Ekle

Üçüncü ve son bölüm için, iki sütunlu (bir buçuk) satır yapısına sahip normal bir bölüm ekleyin.

İlk (sol) sütunda, aşağıdaki mevcut içerikten bir görüntü sürükleyin. Resmin altında, kullandığımız paragraftaki kukla metni kopyalayıp yapıştırın. Ardından, içerik metniyle birlikte bu sahte metnin altına bir metin modülü ekleyin: "Yengeç"

Aynı satırın sağ sütununa, içerik metni olan bir metin modülü girin: "Deniz ürünleri"

Ardından, altına paragraf kukla metin modülünü ekleyin.

Sahte metnin altında, aşağıdaki mevcut içerikten bir görüntü sürükleyin.

Pekala, bu, düzenimizin çerçevesini ve içeriğini halleder. Ancak bu layout'u tasarlamaya başlamadan önce, önceki layout "yardımcı" içeriğimizin bulunduğu bölümü silelim.

Düzeni Tasarlamak

Artık çerçevemiz (satırlar ve sütunlar) ve içeriğimiz (resim ve metin modülleri) hazır olduğuna göre, artık tasarım sürecine başlayabiliriz. Nesneleri hareket ettirmek için belirli görüntülerin genişliklerini ve kenar boşluklarını üst üste binme gibi şeyler yapabilmeleri için ayarlayacağız. Üst üste binen görüntülerin sırrı, görüntüleri gitmelerini istediğiniz yöne "çekmek" için kenar boşluğu ayarlarınızda negatif değerler kullanmaktır. Ve metin yazı tiplerimizi, boyutlarımızı ve kenar boşluklarımızı ayarlamaya ek olarak, birkaç kelimeyi dikey olarak görüntülemek üzere döndürmek için birkaç satır içi özel CSS ekleyeceğim.

Başlayalım.

Tasarımın İlk Dalgası: Metin Modülleri

Tüm düzen benzer yazı tipi tasarımını paylaştığından, önce bir metin modülü ayarını güncellemeyi ve ardından stili kopyalayıp ayarları paylaşan diğer metin modüllerine yapıştırmayı daha kolay buluyorum. Bu, her modül için aynı genel ayarların birer birer eklenmesinin tekrarını önler.

Bu düzende metin için kullanılan iki yazı tipi ve üç boyut vardır. Büyük tek kelimeler için Playfair Display, paragraf metni için Montserrat kullanılmıştır.

Küçük Paragraf Metni

İlk bölümün ilk sütunundaki sahte metin modülünün ayarlarını (veya aslında fark etmez herhangi birinin) güncellemek için tıklayın ve aşağıdakileri güncelleyin:

Metin Yazı Tipi: Montserrat

Gerçekten yapılması gereken tek şey bu. Şık sağ tıklama menüsünü (veya ctr+alt+C ve ctr+alt+V kısayol tuşlarını) kullanarak, modülün stil/tasarım ayarlarını kopyalayın ve tasarım ayarlarını düzen boyunca sahte paragraf metin modüllerinin her birine yapıştırın.

Büyük Tek Kelimelik Metin

“Bake” tek metinli metin modülünü bulun. Ayarları aşağıdaki gibi güncelleyin.

Metin Yazı Tipi: Playfair Ekranı
Metin Yazı Tipi Ağırlığı: Kalın
Metin Metin Boyutu: 72px (D), 50px (T), 42px (S)
Metin Harf Aralığı: 12px
Metin satırı Yükseklik: 1em

Şimdi sağ tıklama menüsünü (veya ctr+alt+C ve ctr+alt+V kısayol tuşlarını) kullanarak, metin modülünün stil/tasarım ayarlarını kopyalayın ve tasarım ayarlarını tek kelime içeren metin modüllerinin her birine yapıştırın (Fresh, Başlangıçlar, Tatlılar, Kahve, Deniz Ürünleri ve Yengeç).

Orta Tek Kelime Metin

Tek kelimelerimizin hepsinin aynı büyük boyuta sahip olmasını istemiyoruz, ancak farklı bir boyut gerektiren birkaç metin modülünde düzeltmeler yapmadan önce hepsi için tasarım ayarlarına yapıştırmak daha hızlıydı.

“Başlangıçlar” içerik metniyle metin modülünü bulun ve aşağıdaki ayarları güncelleyin:

Metin Metin Boyutu: 42px (D), 32px (T), 32px (S)

Şimdi metin modülünün tasarım ayarlarını kopyalayın ve tasarım ayarlarını “Tatlılar” ve “Kahve” kelimesiyle metin modülüne yapıştırın.

Tasarımın İkinci Dalgası: Boyutlar, Kenar Boşlukları ve Kutu Gölgeleri

Mizanpaj boyunca resimlerin ve metnin kenar boşluklarını ayarlamak için, ilk (üst) bölümle en üstten başlayacağım ve ardından ikinci ve üçüncü bölüme devam edeceğim.

Birinci bölüm

Birinci bölümün sol sütununda, ilk (üst) görüntünün görüntü modülü ayarlarını aşağıdaki gibi güncelleyin:

Özel Kenar Boşluğu: -%30 alt, -%20 sol

Bu iki şey yapar. İlk olarak, altındaki görüntüyü üst üste gelecek şekilde yukarı doğru çeker ve ikinci olarak görüntüyü sola çeker.

Not: Negatif marj değeri üzerinde bu tür görüntülerin yerleştirilmesinin gerçekleştirilebileceğini belirtmek önemlidir. Üstte %30 ve sağda %20'lik bir kenar boşluğu eklemenin benzer bir etki yaratacağını düşünebilirsiniz, ancak tüm bunlar görüntüyü aşağı doğru itip küçülterek sağda %20'lik bir kenar boşluğu bırakacaktır.

Doğrudan aşağıdaki görüntü için, tasarım sekmesindeki aşağıdaki ayarları, ona bir kutu gölgesi verecek şekilde güncelleyin:

Kutu Gölgesi: [ilk seçeneği seçin] Kutu Gölgesi Yatay Konumu: -18px
Kutu Gölge Dikey Konumu: -18px
Kutu Gölge Bulanıklığı Gücü: 50px
Kutu Gölge Yayılma Gücü: -7px
Gölge Rengi: rgba(0,0,0,0.3)

Sahte metni içeren görüntünün altındaki Metin Modülünde aşağıdakileri güncelleyin:

Genişlik: %65 (D), %100 (T), %100 (S)

Bu, "Pişir" kelimesini sağa doğru dikey olarak görüntülemek için her kaydırdığımızda yer açmak içindir.

Ardından, sağ sütundaki boş paragraf metin modülü ayarını aşağıdaki gibi güncelleyin:

Bu, paragrafın solunda dikey olarak görüntülenecek "Başlangıçlar" kelimesini kaydırmak için yer yaratacaktır.

İkinci Bölüm

İkinci bölümün ilk satırında, sol sütundaki görüntünün boyutunu aşağıdaki gibi güncelleyin:

Tam Genişliği Zorla: HAYIR
Genişlik: %60 (D), %100 (T), %100 (S)

Sütundaki ikinci görüntü için, kutu gölgesinin bulunduğu birinci bölümdeki görüntünün tasarımını kopyalayın ve görüntüye yapıştırın. Ardından aşağıdakileri güncelleyin:

Tam Genişliği Zorla: HAYIR
Genişlik: %70 (D), %80 (T), %80 (S)
Modül Hizalaması: Sağ
Özel Marj: -%20 Üst

Ardından, ikinci bölümdeki üç sütunlu satıra gidin ve sol sütundaki görüntü için ayarları aşağıdaki gibi güncelleyin:

Tam Genişliği Zorla: HAYIR
Genişlik: %90 (D), %50 (T), %50 (S)
Özel Marj: -%30 Üst

Üçüncü Bölüm

Son bölüm için, sol sütundan başlayarak boş paragraf metin modülünü aşağıdaki gibi güncelleyin:

Özel Kenar Boşluğu: %50 Sağ (D), 0px Sağ (T), 0px Sağ (S)

Sağ sütunda, sahte paragraf metnini içeren Metin Modülünü aşağıdaki gibi güncelleyin:

Genişlik: %65 (D), %100 (T), %100 (S)

Doğrudan sağ sütundaki boş metnin altındaki görüntü için, kutu gölgesinin bulunduğu bir bölümdeki görüntünün tasarımını kopyalayın ve görüntüye yapıştırın. Ardından aşağıdakileri güncelleyin:

Tam Genişliği Zorla: HAYIR
Özel Kenar Boşluğu (Masaüstü): %10 Üst, -%30 Sol
Özel Kenar Boşluğu (Tablet): 0px Sol;

İşte şimdiye kadar sahip olduklarımız.

Tasarımın Son Dalgası: Özel CSS ile Metni Dikey Hale Getirmek

Bu noktada geriye kalan tek şey, metnimizi yatay yerine dikey olarak görüntülenecek şekilde döndürmek. Bunu yapmak için, metni dikey yerleştirme için konumlandırmak için bazı özel CSS ("dönüştür:döndür" özelliği) ve kenar boşluklarında bazı ayarlamalar kullanacağız.

g>Not: Her metin modülünün gelişmiş sekmesine ayrı ayrı satır içi css ekleyebilirim, ancak CSS'yi sayfa ayarlarına eklemenin ve ardından her modülü bir sınıfla hedeflemenin size bu ayarlar üzerinde daha fazla kontrol sağlayacağını düşündüm. Örneğin, mobil cihazlarda dikey metin görüntülemeyi devre dışı bırakmak için medya sorguları ekleyebilirsiniz.

Alt ayarlar menüsünde Sayfa Ayarları'nı açın. Ardından Gelişmiş Sekmesine tıklayın ve Özel CSS kutusuna aşağıdaki CSS'yi girin:

.rotate-right {
-moz-transform:rotate(90deg);  
-webkit-transform:rotate(90deg);  
-o-transform:rotate(90deg);  
-ms-transform:rotate(90deg);
transform: rotate(90deg); 
-moz-transform-origin: right top 0;
-o-transform-origin: right top 0;
-ms-transform-origin: right top 0;
transform-origin: right top 0;
float: right;
}

.rotate-left {
-moz-transform:rotate(270deg);  
-webkit-transform:rotate(270deg);  
-o-transform:rotate(270deg);  
-ms-transform:rotate(270deg);
transform: rotate(270deg); 
-moz-transform-origin: left bottom 0;
-o-transform-origin: left bottom 0;
-ms-transform-origin: left bottom 0;
transform-origin:  left bottom 0;
float: right;
}

Kullanacağım iki sınıfın “sağ-döndür” ve “sol-döndür” olduğuna dikkat edin. Bu CSS kimliklerini, “Pişirme”, “Başlangıçlar”, “Kahve” ve “Yengeç” içerik metniyle metin modüllerini hedeflemek için kullanacağız.

“Pişir” içeren metin modülü için Tasarım Sekmesinde aşağıdakileri güncelleyin:

Özel Kenar Boşluğu (Masaüstü): %10 Üst, -%40 Sağ
Özel Kenar Boşluğu (Tablet): %35 Üst, -%20 Sağ

Ardından Gelişmiş Sekmesine gidin ve aşağıdaki CSS Sınıfını ekleyin:

sola dön

"Başlangıçlar" içeren metin modülü için Tasarım sekmesinde aşağıdakileri güncelleyin:

Özel Marj: %20 Üst, %75 Sağ

Ardından Gelişmiş Sekmesine gidin ve aşağıdaki CSS Sınıfını ekleyin:

sağa dön

“Kahve” içeren metin modülü için Tasarım sekmesinde aşağıdakileri güncelleyin:

Özel Kenar Boşluğu (masaüstü): %80 Üst, %15 Sağ
Özel Marj (tablet): %30 Üst
Özel Marj (akıllı telefon): %50 Üst

Ardından Gelişmiş Sekmesine gidin ve aşağıdaki CSS kimliğini ekleyin:

sağa dön

"Yengeç" içeren metin modülü için Tasarım sekmesinde aşağıdakileri güncelleyin:

Özel Kenar Boşluğu (masaüstü): -%20 Sağ
Özel Kenar Boşluğu (tablet): %20 Üst, -%20 Sağ

Ardından Gelişmiş Sekmesine gidin ve aşağıdaki CSS kimliğini ekleyin:

sola dön

Bu kadar!

Ayarlarınızı kaydedin ve canlı sitedeki sonuçları kontrol edin.

Duyarlı mı?

Tasarım boyunca yapılan ek marj spesifikasyonları nedeniyle, düzen mobilde de harika görünüyor.

Son düşünceler

Bu eğitim için nihai hedefim, bu yaratıcı meyve sularının akmasını sağlamak. Mükemmel düzeni oluşturmak için kenar boşluklarıyla yapılabilecek çok şey var. Modüller arasında hareket etmeye konsantre olmak için bölümlerin ve satırların ayarlarını bilerek değiştirmedim. Ancak, satırlarınız ve bölümleriniz için bazı ek kenar boşlukları ve boşluklar ekleyerek düzeni başka bir tasarım düzeyine (özellikle büyük monitörler için) taşıyabilirsiniz.

Umarım bu yardımcı olmuştur.

Bir dahaki sefere kadar, yorumlarda görüşürüz.

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!