Bir sonraki e -ticaret Divi projeniz için modaya uygun bir kahramanı yeniden oluşturun
Her yıl görünen web tasarım trendleri, tasarımcılar ve DIY kullanıcıları için tasarım olasılığını her yerde genişletmeye yardımcı olur. Giderek daha fazla, asimetrik olarak konumlandırılmış elemanlar, parlak renkler ve geleneksel olarak kalıplarda kullanılan yazı tipleri değerlenir. Bu yazıda size bu öğeleri kullanan bir öğretici vereceğiz. Yeniden yaratacağımız tasarım herhangi bir web sitesi için kullanılabilir, ancak e -ticaret web sitesi için çok iyi çalışır. Ürün görüntüsünüzü spot ışığında tutarken, 2018’e mükemmel bir şekilde uygun bir tasarımı yeniden yaratacağız.
Masaüstündeki masaüstündeki sonuçlar, aşağıdaki şaşırtıcı sonuçları yeniden yaratacağız:
1600 yüksekliğine sahip bir ürün görüntüsü ve 1187
1600 genişliğinde ve 1200 yüksekliğine sahip diğer ürünlerin görüntüsü
Aşağıdaki bağlantıyı açarak doğru ürün resmini indirebilirsiniz (ve Photoshop ile değiştirebilirsiniz)
Aşağıda kaydedebileceğiniz üçgen görüntüler: Navigasyonu devre dışı bırakmak için ana menüyü değiştirin, tercihlerinize bağlı olarak yapabileceğiniz ilk şey, ana menüyü sayfanızın üstünde herhangi bir zamanda tutmak için navigasyon bıçağı seçeneğini devre dışı bırakmaktır. Bunu yapmak için WordPress Dashboard> Divi> Tema Seçeneği> Genel> sabit navigasyon bıçaklarını devre dışı bırakın. Ana Menü Satırı Ayarları Daha sonra, WordPress Dashboard> Ekran ve Özelleştirme’yi açarak ana menü çubuğunda bazı değişiklikler yapmanız gerekir. Oraya geldikten sonra, ana menü çubuğunuza gidin ve aynı sonuçları elde etmek için aşağıdaki ayarları ana menünüze uygulayın: Tam Genişlik Yapın: Evet
Menü Yüksekliği: 66
Max Logo: 54
Metin Boyutu: 24
Mektup alanı: -1
Yazı tipi: Varsayılan tema yazı tipi
Yazı tipi kuvveti: büyük harf ve alt çizgiler
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, başlık ve navigasyon> başlık öğeleri> ‘Arama simgesini göster’ seçeneğini devre dışı bırakmak için arama simgesini devre dışı bırakmaktır. Ama yine de, bu tercihlerinize bağlıdır. Arama simgesinin görüntülenmesine izin verilmesinin herhangi bir zararı yoktur. Arka plan renginin yeni bir kısmı için bir masaüstü sürümünü yeniden oluşturun, ana menüyü değiştirdikten sonra, yeniden yapacağımız masaüstü düzeniyle başlayabiliriz. Yeni veya mevcut bir sayfa açın, yeni bir bölüm ekleyin ve arka plan rengi olarak ‘#F2F2F2’ seçeneğini seçin. Mesafe aynı bölümdeki tasarım sekmesine geçer ve üst ve alt dolgunun ‘0px’ olarak ayarlandığından emin olun. Bu şekilde, daha sonra ekleyeceğiniz parçalar ve satırlar arasında bir mesafe olmayacaktır. Son görünürlük, Gelişmiş sekmesinde görünürlük alt kategorisini açın ve bu bölümü mobil ve tabletlerdeki devre dışı bırakın. Bu yazının başlangıcına dikkat edebileceğiniz için, tüm ekran boyutlarında duyarlı tasarımı korumak için bu ekran boyutu için daha basit bir kahraman yaratıyoruz. Parça ayarlarıyla bitirdikten sonra sütun yapısının yeni bir satırını ekleyin , aşağıdaki sütun yapısı ile devam edip yeni satırlar ekleyebiliriz: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın, tasarım sekmesindeki boyut alt kategorisini açın ve ‘Bu çizgiyi tamamen genişletme’ seçeneğini etkinleştirin. Bu, ekleyeceğimiz tüm modüller için ekranların çoğunu almamızı sağlayacaktır. Mesafe Ardından, aralık alt kategorisini açın ve hattınıza aşağıdaki özel dolguyu uygulayın: Yukarıda: 0px Doğru: 0px
Aşağıda: 135px
Sol: 0px
İlk Metin Modülünü Ekle İlk sütuna satır ayarları için metin ayarları tamamlandı! Artık inanılmaz sonuçlar vermemiz gereken farklı bir modül ekleyebiliriz. Yapmanız gereken ilk şey, satırın ilk sütununa bir metin modülü eklemektir. Okuyabileceğiniz ‘Creative Vibes’in bir kopyası iki metin modülüne ayrılır. Bu, her metin modülü için farklı alt çizgi renkleri kullanmamızı sağlar. İlk kopyayı metin modülünüze ekledikten sonra, Tasarım sekmesine geçin ve aşağıdaki ayarları metin alt kategorisine uygulayın:
Metin yazı tipi: Adamina Metin yazı tipi ağırlığı: kalınlık
Metin yazı tipi kuvveti: alt çizgiler
Renk alt çizgisi metin: #769cc9
Alt çizgi tarzı metin: katı
Metin Boyutu: 73px
Metin rengi: #140056
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Mesafe daha sonra aralık alt kategorisini açın ve üst kenar boşluğuna ‘120px’ ekleyin. Bu, ana menü bıçaklarınız ve bu metin modülü arasında yeterli alan yaratacaktır.
İkinci metin modülünü, metin ayarlarınızın ilk sütununa ekleyin, sadece önceki metin modülünü klonlayan, üst kenar boşluğunu silin ve metnin alt çizgisinin rengini ‘#f5d2cc’ olarak değiştirin veya aynı metin modülünü oluşturabilirsiniz. Aşağıdaki metin ayarlarını kullanmaya başlayın: Metin yazı tipi: Adamina Metin yazı tipi ağırlığı: kalınlık
Metin yazı tipi kuvveti: alt çizgiler
Renk Alt Çizgi Metin: ## F5D2CC
Alt çizgi tarzı metin: katı
Metin Boyutu: 73px
Metin rengi: #140056
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Görüntü modülünü ilk sütuna ekleyin, bu öğreticiyi biraz daha kolay hale getirmek için şeffaf bir görüntüyü kaydedin, size ilk sütuna da yerleştirilmiş şeffaf üçgen görüntüler sağladık. Aşağıdaki görüntüyü bilgisayarınıza kaydedin ve oradan ayrılın:
Resimleri Yükle Görüntüyü kaydettikten sonra, görüntü modülünü ilk sütununuza ekleyin (bu bu satırdaki son modüldür) ve kaydettiğiniz üçgen görüntü dosyasını yükleyin. Arka plan gradyanınız bu üçgeni istediğiniz türde gradyan arka plan veya arka plan rengi sağlayabilir. Ancak kullandığımız renk paleti ile eşleştirmek için aşağıdaki ayarları uyguluyoruz: Birinci renk: #f5d2cc İkinci renk: RGBA (118,156,201,0.32)
Gradyan Türü: Doğrusal
Gradyan yönü: 224deg
Başlangıç Pozisyonu:% 42
Son pozisyon:% 76
Mesafe tasarım sekmesine geçer, aralık alt kategorisini açın ve üst kenar boşluğuna ’10px’ ekleyin. Bu, bir sonraki adımda ekleyeceğimiz ürün görüntüsü altında üçgenler için yeterli mesafe sağlayacaktır. Piksel yerine bir yüzde kullanmamızın nedeni, onu farklı ekran boyutlarıyla uyumlu hale getirmektir. Yüzde seçeneği onu dikkate alır ve mesafenin doğru şekilde hesaplanmasını sağlar. İlk görüntü modülünü, modülü ilk sütuna eklemeyi bitirdikten ve tasarımımıza göre değiştirmeyi bitirdikten sonra görüntü boyutlarının ikinci sütununa ekleyin, İkinci sütun. Bu sütun için, ihtiyacımız olan ilk şey aşağıdaki boyutlara sahip ürünlerden biridir:
Genişlik: 1600px Yükseklik: 1187px Bu örnek için kullandığımız ürün resmi, burada bulabileceğiniz ücretsiz bir kaynaktır. Her resimde ihtiyaçlarınıza göre değiştirebileceğiniz bir Photoshop dosyası vardır, ürünü değiştirmek yapabileceğiniz şeylerden biridir. Bir ürün resminiz var, devam ettikten, yeni bir resim modülü ekledikten ve ürün resminizi yükledikten sonra resimleri yükleyin.
Mesafe daha sonra tasarım sekmesine geçer, boşluk alanını açar ve üst kenar boşluğuna ‘%-20’ ekler. Hatırladığınız gibi, bu öğreticinin ilk bölümünde ana menü çubuğumuz için şeffaf bir arka plan rengi kullandık. Bunu yaparak, bu görüntü modülünün ana menünün arka plan rengi ile kaplanmadan ana menü çubuğunun hemen altında görünmesine izin veriyoruz.
İkinci görüntü modülünü, bu öğreticinin önceki adımında eklediğimiz resmin hemen altındaki görüntü boyutlarının ikinci sütununa ekleyin, diğer ürün görüntüleri ekleyeceğiz. Bu sefer, şekil için aşağıdaki boyutları kullanıyoruz: genişlik: 1600px
Yükseklik: 1200 piksel Bir resim yükleyin, resim modülünü ekleyin ve seçtiğiniz ürün görüntüsünü yükleyin. Mesafe Ardından, Tasarım sekmesine geçin ve boşluk alt kategorisini açın. Bu modülün önceki görüntü ve daha karmaşık bir tasarım yapan ilk sütunla örtüşmesini sağlayacağız. Bunu başarmak için aşağıdaki özel marjları kullanın:
Üst: -50%
Doğru: 350px
Sol: -350px Sınır tarzımız ayrıca bölümün arka planıyla aynı renkte üst ve sağ sınır kuvvetini kullanır:
Sınır Genişliği: 15px
Sınır rengi: #f2f2f2
Sınır Gücü: Katı Bu örnek için yapılan tablet ve mobil sürümün arka plan renginin yeni kısmı için bir tablet ve mobil versiyonu yeniden oluşturun. Tablet ve cep telefonunun ekran boyutu için çok daha kolay ve uygundur. Masaüstü sürümü daha ilginç olsa da, tablet veya cep telefonu ekranında çalışmaz. Bir öncekinin hemen altına yeni bir parça ekleyin ve arka plan rengi olarak ‘#f2f2f2′ ekleyin.
Mesafe, bu bölümden alanın boşluğunu açın ve takip edecek parçalar ve sıralar arasında gerekli alanı oluşturmak için üst ve alt dolguya ’50px’ ekleyin.
Son görünürlük, masaüstündeki bu yeni bölümü devre dışı bırakın, çünkü bu kahraman için zaten bir masaüstü sürümümüz var.
Sütun yapısının yeni bir satırı ekleyin. Bir sütunla yeni bir satır ekleyerek devam edin: Arka Plan Rengi Satır ayarlarını açın ve aşağıdaki renkleri satırın arka planına ekleyin: ‘RGBA (237,237,237,073)’. Bu rengi, metnin okunması daha kolay hale gelmesi için arka plan görüntüsünün üzerindeki kullanıyoruz. Arka plan görüntüsü arka plan görüntüsü sekmesine geçiyor ve ürün görüntülerinizden birini arka plan olarak aşağıdaki seçeneklerle birlikte ekleyin: Arka Plan Görüntü Boyutu: Gerçek Boyut Arka Plan Görüntü Pozisyonu: Orta sol Arka plan görüntüsünün tekrarlanması: Tekrar yok Arka Plan Görüntü Karışımı: Overlay (Bu, bindirme gerçekleşir) Yapıştırıcılar boyutlandırma alt kategorisini açarak ve ‘bu satır tam genişliği yap’ seçeneğini etkinleştirerek devam eder.
Son mesafe, spasi alt kategorisi için aşağıdaki ayarların da geçerli olduğundan emin olun:
Yukarıda: 0px
Doğru: 0px
Aşağıda: 120 piksel Sol: 0px Metin ayarlarının masaüstü sürümünün ilk metin modülünü klonlama Temel olarak, masaüstü sürümü için oluşturduğunuz önceki iki metin modülünü klonlayabilir ve bu yeni satıra ekleyebilirsiniz (veya baştan yapabilirsiniz). Metin modülünü klonlamayı ve değiştirmeyi seçerseniz, değiştirmeniz gereken tek şey tabletler ve telefonlar için metnin boyutudur:
Tablet: 70px
Telefon: 60 piksel
Klon Metin Modülü İkinci Masaüstü Sürüm Metin Ayarları Aynı şeyi İkinci Metin Modülünün Metin Boyutu için de Aynı Yapın ve Bittiniz:
Tablet: 70px Telefon: 60 piksel
Farklı bir ekran boyutunda tekrar yaptığımız nihai sonucu görelim. Masaüstünde
Tablette Telefonda
