Çakışan ve dikey metin ile yaratıcı görüntü düzeni nasıl oluşturulur
İyi bir görüntü düzeni veya ızgara ayarlamada güzel bir şey var. Ancak bazen, mükemmel simetrinin sınırlarının dışında güzellik bulunur. Hepimiz pazarlamada kullanılan bu tür asimetrik dengenin örneklerini gördük. Restoran menüsünde, broşürlerde ve portföy ve galerileri olan sayısız web sitesinde bulabilirsiniz. Bugün size Divi kullanarak kendi yaratıcı görüntü düzeninizi nasıl yapacağınızı göstereceğim. Konsept dünyayı yok etmiyor (veya bu durumda benzersiz), ama umudum, bunun kutunun dışında düşünmeniz ve olağanüstü görünen bir şey yaratmanız için size ilham vereceğidir. Yani mükemmel simetriden kaçınmak ve karıştırmak isteyenler için bu sizin için bir öğreticidir.
Bu düzeni oluşturmanız gereken bu tasarım öğesini hazırlama:
Divi temasının en son sürümü yüklü ve aktif
Ücretsiz restoran düzeni paketinin bir kopyası. Restoran_gallery.json dosyasını divi kütüphanesine ithal edin. Bu, yeni bir düzen yapmaya iyi bir başlangıç yapacaktır.
Kendi resminizi kullanmayı seçerseniz, boyutun en az 800 × 500 olduğundan emin olacağım. Görüntünün düzenini oluşturmak ve bu benzersiz düzen içeriğini eklemek benzersiz bir tasarım süreci gerektirir. Bir karalama defteri yapmak gibi düşünün. Her bölüm için doğru yeri bulmak için hareket ettirmeye başlamadan önce tüm parçalarımızı koyacağız. Bu işlem aynı zamanda tasarım sürecinden daha fazla sahiplik almanıza ve kendi içeriğinizi her eklediğinizde istediğiniz gibi değiştirmenize yardımcı olacaktır.
Yani, en iyisi önce tüm satırlarımızı ve içeriğimizi (resimler, metin) eklemek. Bu, parçaları tasarlamaya başlamadan önce bütünü görselleştirebilmemiz için temel bir çerçeve sağlayacaktır. Restoran galerisi düzenini bir başlangıç olarak kullanın, yeni bir sayfa oluşturalım ve restoran galerisi düzenini sayfaya yükleyelim. Düzende başlık ve altbilgi var (ki şimdi ayrılacağız. Yeni düzenimize eklemek için dört (dört sütun) satırın her birinde görüntüleri kullanacağız. İsterseniz sıfırdan bir görüntü modülü oluşturmayı seçebilirsiniz. Bunu yalnızca işlemi hızlandırmak için yapın. Mevcut içeriği (galerideki tüm resimler) yeni düzeninizi doldurmak için kullanabileceğiniz bir kaynak olarak değerlendirebilirsiniz. Normal bölümün ilk bölümünü yeni bir satırla ekleyin. İki sütun yapısı sütunu (bir buçuk buçuk). Sonra düzeninizin başlığının hemen altına sürükleyin.
İlk sütundan iki metin modülü kopyalayın ve resmin altındaki ikinci sütunda yapıştırın (kukla içeriğinin tek metin içeriğinin üzerinde kaldığından emin olun. “Bake” kelimesini “Yeni başlayanlar” olarak değiştirin. İkinci parça içeriğini ekleyin ve daha yeni yaptığınız yeni bir düzenli bölüm ekleyin. Bir sütunun yapısıyla bir satır verin.
Yeni bir sütunu satmak için aşağıdaki içerikten iki görüntüyü (resim modülü) sürükleyin. Çizginin tam genişliğine ulaşacaklar. Sorun değil, boyutu ve konumu daha sonra ayarlayacağız. Doğrudan önceki satırın altına yeni bir satır ekleyin ve üç sütunun yapısını (üçte birinin üçte biri) verin. Görüntüyü aşağıdaki içerikten ilk sütuna (en solda) sürükleyin. İkinci sütunda (orta), metin modülünü içerik metni ile ekleyin: “Tatlılar” sonra metin modüllerinden birini ilk bölümde kukla paragraf metniyle kopyalayın ve metin modülünün altına “Gıda” metin altına yapıştırın. Üçüncü satırda (en sağda), metin modülünü içerik metni ile ekleyin: “Kahve”. Hepsi ikinci kısmı doldurmak için. Üçüncü bölüm içeriğini üçüncü ve son parçalara ekleyin, iki katlı satır yapısı (bir buçuk buçuk) ile normal kısmı ekleyin. İlk sütunda (solda), görüntüyü aşağıdaki içerikten sürükleyin. Resmin altında, kullandığımız kukla metnin paragrafında kopyalayın ve yapıştırın. Ardından, metin modülünü içerik metninin altına ekleyin: “Yengeç” Aynı satır sağ sütununda, metin modülünü içerik metniyle girin: “Seafood” sonra aşağıdaki Kukla Paragraf metin modülünü ekleyin. Yapay metin altında, görüntüyü aşağıdaki içerikten sürükleyin.
Şimdi, çalışma çerçevemizi ve düzen içeriğimizi ele alıyor. Ancak bu düzeni tasarlamaya başlamadan önce, önceki “yardımcı” içeriğimizi içeren kısmı silelim. Mevcut düzeni tasarlama bir çerçevemiz (satır ve sütun) ve içeriğimiz (resim ve metin modülü) olduktan sonra, şimdi tasarım işlemini başlatabiliriz. Etrafımızdaki nesneleri taşımak, belirli görüntülerin genişliğini ve marjını örtüşme gibi şeyler yapabilmeleri için ayarlayacaktır. Üst üste binen görüntülerin sırrı, görüntüyü istediğiniz yönde “çekmek” için marj ayarlarınızdaki negatif değeri kullanmaktır. Ve metin yazı tipini, boyutunu ve marjı ayarlamanın yanı sıra, dikey olarak görüntülenecek birkaç kelimeyi oynamak için birkaç satır özel CSS ekleyeceğim. Başlayalım. İlk Dalga Tasarımı: Metin Modülü Tüm düzen benzer bir yazı tipi tasarımına sahip olduğundan, önce metin modülünün bir ayarını güncellemeyi daha kolay buluyorum, ardından stili aynı ayarlara sahip başka bir metin modülüne kopyalayıp ekliyor. Bu, her modül için aynı genel düzenlemenin eklenmesinin tekrarlanmasını önler. Bu düzende metin için kullanılan iki yazı tipi ve üç boyut vardır. Playfair ekranı daha büyük tek kelimeler için kullanılır ve paragraf metni için Montserrat kullanılır. Küçük Paragraf Metni İlk parçanın ilk sütununda (veya aslında sorun yok) Kukla Metin Modülü ayarlarını güncellemek için tıklayın ve aşağıdakileri güncelleyin: Metin Yazı Tipi: Montserrat: Gerçekten yapılması gereken her şey bu. İyi bir sağa tıklayın -veya CTR+Alt+C ve Ctr+V) kısayol düğmeleri, kopya stili ayarlarını/tasarım modülü kopyalayın ve tasarım ayarlarını düzen boyunca her bir kukla paragraf metin modülüne yapıştırın. Büyük Tek Kelime Metni Tek bir metin “Bake” ile metin modülünü bulun. Ayarları aşağıdaki gibi güncelleyin. Metin Yasağı: Playfair Ekran Ağırlık Ağırlık Metin Yazı Tipi: Metin Kalınlığı Metin Boyutu: 72px (D), 50px (T), 42px (S) Uzay Mektup Metin: 12 Piksel Hat Metin Yüksekliği: 1EM Şimdi sağ tıklama menüsünü (veya CTR’yi kullanma +Alt kısayol düğmesi+C ve CTR+Alt+V), Bir kelime içeren her metin modülüne (taze, açılış, tatlı, kahve, deniz ürünleri ve yengeç) tasarım ayarlarını kopyalayın ve tasarım ayarlarını kopyalayın. Tek kelime metni, tüm tek kelimelerimizin aynı büyük boyuta sahip olmasını istememiz, ancak farklı boyutlar gerektiren birkaç metin modülüne ayarlamalar yapmadan önce her şey için tasarım ayarları eklemek daha hızlıdır.”Yeni Başlayan” içerik metnine sahip metin modülünü bulun ve aşağıdaki ayarları güncelleyin: Metin Boyutu Metin: 42px (D), 32px (T), 32px (S)
Şimdi metin modülü için tasarım ayarlarını kopyalayın ve metin modülündeki tasarım ayarlarını “tatlılar” kelimesiyle ve “kahve” kelimesiyle yapıştırın. İkinci Tasarım Dalgası: Düzen boyunca görüntü ve metin kenar boşluğunu ayarlamak için Boyut, Kenar ve Gölge Gölgesi, ilk (üst) ile üstten başlayacağım ve sonra ikinci ve üçüncü parçalara geçeceğim. Birinci Bölüm Sol sütun birinci bölümde, ilk görüntü (üst) görüntünün ayarlarını şu şekilde güncelleyin: Özel Marj:% -30 daha düşük,% -20 Sol iki şey yapın. İlk olarak, üst üste binmesi için altındaki görüntüyü yukarı çekti ve ikincisi resmi sola çekti. Not: Negatif marj değerinin böyle bir görüntü yerleştirebileceğini belirtmek önemlidir. % 30 üst ve% 20 sağ marj eklemenin benzer bir etki yaratacağını düşünebilirsiniz, ancak tüm bunlar yapılır, görüntüyü aşağı itmek ve görüntüyü sağda% 20 marj olacak şekilde daraltmaktır. Doğrudan aşağıdaki görüntüler için, bir gölge kutusu vermek için tasarım sekmesindeki aşağıdaki ayarları güncelleyin: Kutu Gölgesi: [İlk seçeneği seçin] Yatay Konum Gölge Kutusu: -18px Dikey Konum Gölge Kutusu: -18px Furfly Mukavemeti Gölge Kutusu: 50px Mukavemeti Yayılan Gölge Kutusu: -7px Gölge Renk: RGBA (0,0,0,0.0.3) Yapay metin 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 (ler)
Bu, sağa dikey olarak görüntülenecek “pişir” kelimesini her yüzdüğümüzde boşluk yaratmaktır. Ardından, Kukla Paragraf metin modülü ayarlarını doğru sütundaki aşağıdaki gibi güncelleyin: Bu, paragrafın solunda dikey olarak görüntülenecek “yeni başlayanlar” kelimesini yakalamak için bir oda yapacak. İkinci bölümün ilk sıra kısmındaki ikinci bölüm, sol sütundaki görüntü boyutunu aşağıdaki gibi güncelleyin: Zorla tam genişlik: genişlik değil:% 60 (d),% 100 (t),% 100 (ler) Sütundaki ikinci resim, birinci bölümde kutunun gölgesine sahip olan görüntü tasarımı kopyasını kopyalayın ve resme yapıştırın. Sonra aşağıdakileri güncelleyin: Zorla tam genişlik: Geniş değil:% 70 (D),% 80 (t),% 80 (ler) Modül Hizalama: Doğru Özel Kenar: -20 Üst
Ardından, ikinci bölümdeki üç sütuna gidin ve sol sütundaki görüntü ayarlarını aşağıdaki gibi güncelleyin: Zorla Tam Genişlik: Genişlik:% 90 (D),% 50 (T),% 50 (ler) Özel Marj: % -30
Üçüncü Bölüm Son bölüm için, sol sütunla başlayarak, kukla paragraf metin modülünü aşağıdaki gibi güncelleyin: Özel kenar:% 50 sağ (d), 0px sağ (t), 0px sağ (s)
Sağ sütun güncellemesinde, kukla paragraf metnini içeren metin modülü aşağıdaki gibi: Genişlik:% 65 (d),% 100 (t),% 100 (s) Doğrudan sağ sütundaki kukla metnin altındaki görüntüler için, görüntünün tasarımını kutunun gölgesine sahip olanda kopyalayın ve görüntüye yapıştırın. Sonra aşağıdakileri güncelleyin: Force Fullwidth: Özel marj yok (masaüstü):% 10 üst,% -30 sol özel kenar boşluğu (tablet): 0px sol; İşte şimdiye kadar sahip olduğumuz şey. Son Tasarım Dalgası: Bu noktada özel CSS ile dikey bir metin yapın. Bunu yapmak için, metni dikey yerleşim için konumlandırmak için bazı özel CSS (Özellik “Dönüşüm: Döndür”) ve kenar boşluğunda bazı ayarlamalar kullanacağız. G> Not: Her metin modülünün devam eden sekmesine tek tek bir CSS satırı ekleyebilirim, ancak sayfa ayarlarına CSS eklemek ve daha sonra her modülü sınıfla hedeflemek bu ayar üzerinde daha fazla kontrol sağlayacaktır. Örneğin, mobil cihazlarda dikey metnin görüntülemesini devre dışı bırakmak için medya sorguları ekleyebilirsiniz. Aşağıdaki Ayarlar menüsündeki sayfa ayarlarını açın. Ardından Gelişmiş sekmesini 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: döndür (90deg); -ms-transform: rotate (90deg); Dönüşüm: döndür (90deg); -moz-transform-orijin: sağ üst 0; -O-transform-orijin: sağ üst 0; -MS-Transform-Origin: sağ üst 0;Dönüşüm-Origin: Sağ Top 0;
Sağa çık;
}
.sola dön {
-Moz-transform: rotate (270deg);
-Webkit-Transform: Rotate (270deg);
-O-transform: rotate (270deg);
-Ms-transform: rotate (270deg);
Dönüşüm: döndür (270deg);
-moz-transform-orijin: sol alt 0;
-O-transform-orijin: sol alt 0;
-ms-transform-orijin: sol alt 0;
Dönüşüm Origin: Sol Alt 0;
Sağa çık;
}
Kullanacağım iki sınıfa “döndürme mükemmel” ve “döner-sol”. Bu CSS kimliğini “kızartma”, “acemi”, “kahve” ve “yengeç” içeriğine sahip metin modüllerini hedeflemek için kullanacağız. “Bake” içeren metin modülleri için, tasarım sekmesinde aşağıdakileri güncelleyin: Özel kenar boşluğu (masaüstü):% 10 üst,% -40 sağ özel marj (tablet):% 35 yukarıda,% -20 sağa gidin, daha sonra ilerleme sekmesine gidin ve aşağıdaki CSS sınıfını ekleyin: Tasarım sekmesinde aşağıdaki “acemi” içeren metin modülü için kapatın: Özel kenar:% 20 üst,% 75 sağ daha sonra ilerleme sekmesine gidin ve aşağıdaki CSS sınıfını ekleyin: için doğru Tasarım sekmesinde aşağıdaki güncellenmiş “kahve” içeren metin modülü için metin modülü: özel kenar boşluğu (masaüstü):% 80 yukarıda,% 15 doğru özel marj (tablet): Özel kenar boşluğuna (akıllı telefon)% 30:% 50 Daha sonra TOP TAVSİYE SEKMESİNE GİTİN ve Tasarım sekmesinde aşağıdaki güncellenmiş “yengeç” içeren metin modülü için doğru: Özel kenar boşluğu (masaüstü): -20 doğru özel kenar boşluğu (tablet):% 20 Üst,% -20 sağ daha sonra sekme ilerlemesini açın ve aşağıdaki CSS kimliğini ekleyin: onun için doğru! Ayarlarınızı kaydedin ve doğrudan sitedeki sonuçları görün. Duyarlı? Tasarım boyunca yapılan ek marj özellikleri olduğundan, düzen cep telefonunda da iyi görünür.
