Bir Sonraki e-Ticaret Divi Projeniz için Modaya Uygun Bir Kahraman Bölümünü Yeniden Oluşturun

Her yıl ortaya çıkan web tasarım trendleri, her yerdeki tasarımcılar ve DIY kullanıcıları için tasarım olanaklarını genişletmeye yardımcı oluyor. Baskıda geleneksel olarak kullanılan asimetrik olarak yerleştirilmiş öğeler, parlak renkler ve yazı tipi aileleri giderek daha fazla takdir edilmektedir. Bu gönderide, size bu öğeleri kullanan bir eğitim vereceğiz. Yeniden oluşturacağımız tasarım herhangi bir web sitesi için kullanılabilir, ancak özellikle e-Ticaret web siteleri için iyi çalışır. Ürün görsellerinizi ön planda tutarken, 2018'e tam olarak uyan bir tasarımı yeniden yaratacağız.

Sonuç

Masaüstünde

Masaüstünde, aşağıdaki çarpıcı sonucu yeniden oluşturacağız:

Tablette

Tablet ve telefon için aynı anda daha basit ve etkili bir alternatife ihtiyacımız olacak. Bu nedenle, aşağıdaki tasarımı yeniden yaratıyoruz:

Telefonda

Tablet için kullandığımız tasarımı telefon için de kullanıyoruz:

Neye ihtiyacın var

• 1600 yükseklik ve 1187 genişliğe sahip tek ürün görseli
• 1600 genişlik ve 1200 yüksekliğe sahip başka bir ürün görseli
• Aşağıdaki bağlantıya giderek tam ürün resmini indirebilir (ve Photoshop ile değiştirebilirsiniz)
• Aşağıda kaydedebileceğiniz üçgen görüntü:

Birincil Menüyü Değiştir

Sabit Gezinmeyi Devre Dışı Bırak

Tercihinize bağlı olarak yapabileceğiniz ilk şey, birincil menüyü her zaman sayfanızın en üstünde tutmak için Sabit Gezinme Çubuğu seçeneğini devre dışı bırakmaktır. Bunu yapmak için WordPress Panonuz > Divi > Tema Seçenekleri > Genel > Sabit Gezinti Çubuğunu Devre Dışı Bırak seçeneğine gidin .

Birincil Menü Çubuğu Ayarları

Ardından, WordPress Pano > Görünüm ve Özelleştir seçeneğine giderek Birincil Menü Çubuğunda bazı değişiklikler yapmanız gerekir. Oradayken, Birincil Menü çubuğunuza gidin ve aynı sonucu elde etmek için aşağıdaki ayarları birincil menünüze uygulayın:

• Tam Genişlik Yap: Evet
• Menü Yüksekliği: 66
• Logo Maksimum Yükseklik: 54
• Metin Boyutu: 24
• Harf Aralığı: -1
• Yazı Tipi: Varsayılan Tema Yazı Tipi
• Yazı Tipi Stili: Büyük Harf ve Altı Çizili
• Metin Rengi: #140056
• Aktif Bağlantı Rengi: #140056
• Arka Plan Rengi: rgba(255,255,255,0)
• Açılır Menü Arka Plan Rengi: rgba(255,255,255,0)

Arama Simgesini Devre Dışı Bırak

Yapabileceğiniz başka bir şey de Başlık ve Gezinme > Başlık Öğeleri > 'Arama Simgesini Göster' seçeneğini devre dışı bırakarak arama simgesini devre dışı bırakmaktır. Ancak yine, bu tercihlerinizin ne olduğuna bağlıdır. Arama simgesini göstermek için bırakmanın bir zararı yoktur.

Masaüstü Sürümünü Yeniden Oluştur

Yeni Bölüm Oluştur

Arka plan rengi

Artık birincil menüyü değiştirdiğimize göre, yeniden oluşturacağımız masaüstü düzenine başlayabiliriz. Yeni veya mevcut bir sayfa açın, yeni bir bölüm ekleyin ve arka plan rengi olarak '#f2f2f2'yi seçin.

aralık

Aynı bölümün Tasarım sekmesine gidin ve üst ve alt dolgunun '0px' olarak ayarlandığından emin olun. Böylece bölüm ile sonradan ekleyeceğiniz satır arasında mesafe kalmayacaktır.

görünürlük

Son olarak, Gelişmiş sekmesinde Görünürlük alt kategorisini açın ve bu bölümü telefon ve tablette devre dışı bırakın. Bu gönderinin başında fark edebileceğiniz gibi, tüm ekran boyutlarında duyarlı bir tasarımı korumak için bu ekran boyutları için daha basit bir kahraman bölümü oluşturuyoruz.

Yeni Satır Ekle

Sütun Yapısı

Artık bölüm ayarlarıyla işimiz bittiğinde, devam edip aşağıdaki sütun yapısıyla ona yeni bir satır ekleyebiliriz:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın, Tasarım sekmesinin Boyutlandırma alt kategorisine gidin ve 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin. Bu, ekleyeceğimiz tüm modüller için ekranın çoğunluğunu almamızı sağlayacaktır.

aralık

Ardından, Aralık alt kategorisini açın ve satırınıza aşağıdaki özel dolguyu uygulayın:

• Üst: 0 piksel
• Sağ: 0 piksel
• Alt: 135 piksel
• Sol: 0 piksel

İlk Sütuna İlk Metin Modülünü Ekle

Metin Ayarları

Satır ayarları tamamlandı! Artık çarpıcı sonucu yaratmak için ihtiyacımız olan farklı modülleri ekleyebiliriz. Yapmanız gereken ilk şey, satırın ilk sütununa bir Metin Modülü eklemek. Okuyabileceğiniz 'Creative Vibes' kopyası iki Metin Modülüne bölünmüştür. Bu, her Metin Modülü için farklı alt çizgi renkleri kullanmamızı sağlar. Metin Modülünüze ilk kopyayı ekledikten sonra Tasarım sekmesine gidin ve Metin alt kategorisine aşağıdaki ayarları uygulayın:

• Metin Yazı Tipi: Adamina
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: Altı Çizili
• Metin Alt Çizgi Rengi: #769cc9
• Metin Altı Çizili Stili: Düz
• Metin Boyutu: 73px
• Metin Rengi: #140056
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Ardından Aralık alt kategorisini açın ve üst kenar boşluğuna '120px' ekleyin. Bu, birincil menü çubuğunuz ve bu Metin Modülü arasında yeterli alan yaratacaktır.

Birinci Sütuna İkinci Metin Modülü Ekle

Metin Ayarları

Basitçe önceki Metin Modülünü kopyalayabilir, üst kenar boşluğunu kaldırabilir ve Metin Altı Çizili rengini '#f5d2cc' olarak değiştirebilirsiniz veya aşağıdaki metin ayarlarını kullanarak aynı Metin Modülünü yeniden sıfırdan oluşturabilirsiniz:

• Metin Yazı Tipi: Adamina
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: Altı Çizili
• Metin Alt Çizgi Rengi: ##f5d2cc
• Metin Altı Çizili Stili: Düz
• Metin Boyutu: 73px
• Metin Rengi: #140056
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

İlk Sütuna Görüntü Modülü Ekle

Şeffaf Resmi Kaydet

Bu öğreticiyi biraz daha kolaylaştırmak için, size ilk sütunda yer alan şeffaf üçgen görüntüsünü de sağladık. Aşağıdaki görüntüyü bilgisayarınıza kaydedin ve oradan gidin:

Fotoğraf yükleniyor

Resmi kaydettikten sonra, ilk sütununuza bir Resim Modülü ekleyin (bu, bu satırdaki son modüldür) ve kaydettiğiniz üçgen resim dosyasını yükleyin.

Degrade Arka Plan

Bu üçgene istediğiniz degrade arka planı veya arka plan rengini verebilirsiniz. Ancak kullandığımız renk paletiyle eşleştirmek için aşağıdaki ayarları uyguluyoruz:

• İlk Renk: #f5d2cc
• İkinci Renk: rgba(118,156,201,0.32)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 224deg
• Başlangıç ​​Konumu: %42
• Bitiş Konumu: %76

aralık

Tasarım sekmesine gidin, Aralık alt kategorisini açın ve üst kenar boşluğuna '10px' ekleyin. Bu, sonraki adımlarda ekleyeceğimiz ürün görselinin altında üçgenin görünmesi için yeterli mesafe yaratacaktır. Piksel yerine yüzde kullanmamızın nedeni, farklı ekran boyutlarıyla eşleşmesini sağlamaktır. Yüzde seçeneği bunu dikkate alır ve mesafenin doğru hesaplanmasını sağlar.

İkinci Sütuna İlk Görüntü Modülünü Ekle

Görüntü Boyutları

Artık ilk sütuna modül eklemeyi ve tasarımımıza göre değiştirmeyi bitirdiğimize göre, ikinci sütuna geçebiliriz. Bu sütun için ihtiyacımız olan ilk şey, aşağıdaki boyutlara sahip ürün resimlerinden biri:

• Genişlik: 1600 piksel
• Yükseklik: 1187 piksel

Bu örnek için kullandığımız ürün resimleri, burada bulabileceğiniz ücretsiz bir kaynaktır. Görüntülerin her birinin kendi ihtiyaçlarınıza göre değiştirebileceğiniz bir Photoshop dosyası vardır, ürünleri değiştirmek yapabileceğiniz şeylerden biridir.

Fotoğraf yükleniyor

Ürün görselinizi yerleştirdikten sonra devam edin, yeni bir Görsel Modülü ekleyin ve Ürün Görselinizi yükleyin.

aralık

Ardından Tasarım sekmesine gidin, Aralık alt kategorisini açın ve üst kenar boşluğuna '-20%' ekleyin. Hatırlayabileceğiniz gibi, bu öğreticinin ilk bölümünde Birincil Menü Çubuğumuz için şeffaf bir arka plan rengi kullandık. Bunu yaparak, bu Görüntü Modülünün birincil menü arka plan rengiyle kaplanmadan birincil menü çubuğunun hemen altında görünmesine izin veriyoruz.

İkinci Sütuna İkinci Görüntü Modülü Ekle

Görüntü Boyutları

Bu öğreticinin önceki adımında eklediğimiz resmin hemen altına başka bir ürün resmi ekleyeceğiz. Bu sefer, resim için aşağıdaki boyutları kullanıyoruz:

• Genişlik: 1600 piksel
• Yükseklik: 1200 piksel

Fotoğraf yükleniyor

Devam edin, bir Resim Modülü ekleyin ve seçtiğiniz ürün resmini yükleyin.

aralık

Ardından Tasarım sekmesine gidin ve Aralık alt kategorisini açın. Daha karmaşık bir tasarım oluşturmak için bu modülü hem önceki görüntüyle hem de ilk sütunla örtüştüreceğiz. Bunu başarmak için aşağıdaki özel kenar boşluğunu kullanın:

• Üst: -50%
• Sağ: 350 piksel
• Sol: -350 piksel

Kenar Stilleri

Ayrıca bölüm arka planıyla aynı renkte üst ve sağ Kenarlık Stilleri kullanıyoruz:

• Kenar Genişliği: 15px
• Kenar Rengi: #f2f2f2
• Kenar Stili: Katı

Tablet ve Telefon Sürümünü Yeniden Oluştur

Yeni Bölüm Oluştur

Arka plan rengi

Bu örnek için oluşturulan tablet ve telefon sürümü, tablet ve telefon ekran boyutları için çok daha basit ve uygundur. Masaüstü sürümü daha çekici olsa da, tablet veya telefon ekranında işlevsel değildir. Bir öncekinin hemen altına yeni bir bölüm ekleyin ve arka plan rengi olarak '#f2f2f2' ekleyin.

aralık

Ardından, bu bölümün Aralık alt kategorisini açın ve bölüm ile takip eden satır arasında gerekli boşluğu oluşturmak için üst ve alt dolguya '50px' ekleyin.

görünürlük

Son olarak, bu kahraman bölümü için zaten bir masaüstü sürümümüz olduğundan, bu yeni bölümü masaüstünde devre dışı bırakın.

Yeni Satır Ekle

Sütun Yapısı

Tek sütunlu yeni bir satır ekleyerek devam edin:

Arka plan rengi

Satır ayarlarını açın ve satırın arka planına şu rengi ekleyin: 'rgba(237.237,237.073)'. Bu rengi arka plan görüntüsünün üstünde kullanıyoruz, böylece metin daha okunabilir hale geliyor.

Arka plan görüntüsü

Arka plan resmi sekmesine geçin ve aşağıdaki seçeneklerle birlikte ürün resimlerinizden birini arka plan olarak ekleyin:

• Arka Plan Resmi Boyutu: Gerçek Boyut
• Arka Plan Resmi Konumu: Orta Sol
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Görüntüsü Karışımı: Kaplama (bu, kaplamanın gerçekleşmesini sağlar)

boyutlandırma

Boyutlandırma alt kategorisini açarak devam edin ve 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

aralık

Son olarak, aşağıdaki ayarların Aralık alt kategorisi için de geçerli olduğundan emin olun:

• Üst: 0 piksel
• Sağ: 0 piksel
• Alt: 120 piksel
• Sol: 0 piksel

Masaüstü Sürümünün İlk Metin Modülünü Klonla

Metin Ayarları

Temel olarak masaüstü sürümü için oluşturduğunuz önceki iki Metin Modülünü kopyalayabilir ve bunları bu yeni satıra ekleyebilir (veya sıfırdan oluşturabilirsiniz). Metin Modüllerini klonlamayı ve değiştirmeyi seçerseniz, değiştirmeniz gereken tek şey hem tablet hem de telefon için Metin Boyutu'dur:

• Tablet: 70 piksel
• Telefon: 60 piksel

Masaüstü Sürümünün İkinci Metin Modülünü Klonla

Metin Ayarları

Aynı şeyi ikinci Metin Modülünün Metin Boyutu için de yapın ve bitirdiniz:

• Tablet: 70 piksel
• Telefon: 60 piksel

Sonuç

Farklı ekran boyutlarında yeniden oluşturduğumuz sonuca son olarak bakalım.

Masaüstünde

Tablette

Telefonda

Son düşünceler

Eh, hepsi bu eğitim için! Bu e-ticaret kahraman bölümü size zaman kazandıracak ve bu tekniği kullanarak kendi tasarımlarınızı yaratmanız için yaratıcılığınızı teşvik edecektir. Bu e-ticaret kahramanı bölümünü herhangi bir web sitesi türü için kullanabilirsiniz, ancak özellikle ürün resimlerini yaratıcı ve modaya uygun bir şekilde sergilemeye odaklanan bir e-ticaret web sitesiyle eşleşir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!