Divi ile Kayan Moda Kataloğu Nasıl Oluşturulur

Bu gönderide, size nasıl kayan bir moda kataloğu oluşturabileceğinizi göstereceğiz. Bu yöntemi kullanmak, hedef kitlenize kağıt bir katalog vererek yaptığınız gibi bağlantı kurmanıza yardımcı olacaktır. Çevrimiçi kaydırmalı bir moda kataloğu oluşturmak, katalogdan elde ettiğiniz sonuçları artırmanıza yardımcı olabilir. Örneğin, mağaza öğelerine doğrudan bağlantılar ekleyerek, satın alma süreci de geliştirilecektir.

Sonuç

Adım adım nasıl oluşturulacağını göstereceğimiz sonuç masaüstünde şöyle görünür:

Ve telefonda ve tablette şöyle:

Divi ile Kayan Moda Kataloğu Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Photoshop ile Görüntülere Şeffaf Şekiller Ekleyin

Size göstereceğimiz ilk şey, Photoshop ile bir görüntüye nasıl saydam bir parça ekleyeceğinizdir. Photoshop için GimpShop adında ücretsiz bir alternatif var, ancak eğitimin bu bölümünde yalnızca Photoshop kullanacağız. Her biri iki farklı şekle sahip iki resme ihtiyacımız olacak; biri masaüstü, diğeri mobil ve tablet için. Bu bölümde, görüntüye nasıl şeffaf bir şekil ekleyeceğinizi göstereceğiz. Daha sonra ihtiyacınız olan tüm görselleri kendiniz yapabilirsiniz.

Photoshop'u açın

Bilgisayarınızda Photoshop'u açarak başlayın.

Resmi Aç

Ardından, düzenlemek istediğiniz ilk resmi açın. Yöntem, bu eğitim boyunca kullanacağınız üç görüntünün tümü için aynı kalır. Bu yüzden sadece bir kez açıklayacağız.

Görüntüye Çift Tıkla ve Katman Oluştur

Düzenlemek istediğiniz resmi açtıktan sonra resme çift tıklayın ve onun için yeni bir katman oluşturun.

Başka Bir Katman Ekle

Üzerine boş bir katman daha ekleyerek devam edin.

Katman 1 ve Çokgen Kement Aracını Seçin

Layer 1'i seçin ve Polygonal Lasso Tool'u kullanmaya başlayın.

Şekil Yap

Çokgen Kement Aracını etkinleştirirken devam edin ve görüntünüzde şeffaf şekli oluşturun.

Katman 1'i Görünmez Yap ve Katman 0'ı Seçerken Sil'e Bas

Saydam olmasını istediğiniz alanı seçtikten sonra, 1. Katman'ı görünmez yapın, tekrar Katman 0'ı seçin ve klavyenizdeki Sil düğmesine basın.

Dikdörtgen Seçim Çerçevesi Aracını Seçin ve Görüntünün Bir Yerine Tıklayın

Bunu yaptıktan sonra, Dikdörtgen Seçim Çerçevesi Aracını seçin ve resminizde bir yere tıklayın.

Resmi PNG Olarak Kaydet

Son olarak, görüntüyü PNG olarak kaydetmeniz ve düzen boyunca kullanacağınız dört görüntünün tümü için aynı işlemi tekrarlamanız gerekir.

Birincil Menü Çubuğu Ayarları

Oluşturduğumuz düzen için ihtiyacımız olan Birincil Menü Çubuğu ayarları şunlardır:

• Logo Resmini Gizle: Etkinleştir
• Menü Yüksekliği: 30
• Metin Boyutu: 15
• Harf Aralığı: -1
• Yazı Tipi: Lato
• Yazı Tipi Stili: Kalın ve Büyük Harf
• Metin Rengi: #FFFFFF
• Aktif Bağlantı Rengi: #FFFFFF
• Arka Plan Rengi: rgba(255,255,255,0)
• Açılır Menü Arka Plan Rengi: rgba(255,255,255,0)

Sürüm Tanıtımı

Birincil Menü Çubuğunu değiştirdikten sonra, devam edip yeni bir sayfa ekleyebilir, Divi Builder'ı kullanabilir ve Visual Builder'a geçebilirsiniz.

Yeni Bölüm Ekle

Bu sayfada, standart bir bölüm ekleyerek başlayın.

Bölüm Arka Plan Rengi

Bu rengin arka planının '#d6d6d6' olması gerekir.

Özel Dolgu

Bu bölümün Tasarım sekmesine geçin. Aralık alt kategorisinde, üst dolguya '24px' ve alt dolguya 0px ekleyin.

Tek Sütunlu Satır Ekle

Bu yapıldıktan sonra, devam edip bölüme tek sütunlu bir satır ekleyebilirsiniz.

boyutlandırma

Tasarım sekmesine gidin ve Boyutlandırma alt kategorisini değiştirin:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: 1

Özel Dolgu

Aşağı kaydırın ve satırın üst dolgusuna '0px' ekleyin.

İlk Metin Modülü

Bu yapıldıktan sonra, satıra bir Metin Modülü ekleyebilirsiniz. Görünmesini istediğiniz metni girdikten sonra Tasarım sekmesine gidin ve Metin alt kategorisine aşağıdaki değişikliklerin uygulandığından emin olun:

• Metin Yazı Tipi: Eski Standart TT
• Yazı Tipi Stili: Büyük Harf
• Metin Yazı Tipi Boyutu: 72 (Masaüstü), 41 (Tablet), 29 (Telefon)
• Metin Rengi: #000000
• Metin Harf Aralığı: 11px
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

Aralık alt kategorisini açın ve üst ve alt dolguya '30px' ekleyin.

Bölücü Modül

Metin Modülünün hemen altına bir Bölücü Modül ekleyin ve 'Bölücüyü Göster' seçeneğini etkinleştirin.

Tasarım sekmesine gidin ve ayırıcı renk olarak '#FFFFFF' öğesini seçin.

Ardından, Bölücü Stili olarak 'Katı'yı ve Stiller alt kategorisinde Bölücü Konumu olarak 'Üst'ü seçin.

Ardından Boyutlandırma alt kategorisini açın ve aşağıdaki ayarların geçerli olmasını sağlayın:

• Bölücü Ağırlığı: 10px
• Yükseklik: 23 piksel
• Genişlik: %100
  

İkinci Metin Modülü

Bölücü Modülün hemen altına başka bir Metin Modülü ekleyin. Karakter Haritanızda (Windows) veya Karakter Paletinizde (Mac) istediğiniz simgeyi seçin ve İçerik sekmesine yerleştirin. Bu örnek için şu sembolü kullandık: '↓'. Ardından Tasarım sekmesine gidin ve aşağıdaki ayarların geçerli olmasını sağlayın:

• Metin Yazı Tipi Boyutu: 42px
• Metin Rengi: #000000
• Metin Yönü: Merkez

Masaüstü Moda Kataloğu (Yeni Bölüm)

Şimdi başka bir standart bölüm ekleyin. Bu bölüm, masaüstünde kataloğun farklı bir bölümünü görüntüleyen iki satır içerecektir.

Bölüm Ayarları

Arka plan rengi

Bu bölümün arka plan rengi olarak '#FFFFFF' kullanın.

Özel Dolgu

Ardından Tasarım sekmesine gidin ve üst dolguya '15px' ekleyin.

İlk sıra

Sütun Yapısı

Ayarda değişiklik yaptıktan sonra, aşağıdaki sütun yapısına sahip bir satır ekleyin:

Arka plan rengi

Satır ayarlarını açın ve arka plan rengi olarak 'rgba(255,255,255,0.14)' ekleyin.

Arka plan görüntüsü

Bu gönderinin Photoshop bölümünde oluşturduğunuz görüntülerden birini ekleyin ve Arka Plan Görüntüsü Karışımı olarak 'Ton'u kullanın.

boyutlandırma

Son olarak, Boyutlandırma alt kategorisinde aşağıdaki değişiklikleri yapın:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

İlk Metin Modülü

Satır ayarlarını tamamladıktan sonra ikinci sütuna bir Metin Modülü ekleyin. Metin alt kategorisi için aşağıdaki ayarları kullanın:

• Metin Yazı Tipi: Acı
• Metin Yazı Tipi Boyutu: 63px
• Metin Rengi: #000000
• Metin Yönü: Merkez

Bölücü Modül

İlk Metin Modülünün hemen altına bir Bölücü Modül ekleyin ve 'Bölücüyü Göster' seçeneğini etkinleştirin.

Tasarım sekmesine gidin ve ayırıcı renk olarak '#000000' kullanın.

Stiller alt kategorisinde, Bölücü Stili olarak 'Katı' ve Bölücü Konumu olarak 'Üst'ü kullanın.

Aynı sekmeyi aşağı kaydırın ve Boyutlandırma alt kategorisine aşağıdaki ayarları uygulayın:

• Bölücü Ağırlığı: 3px
• Yükseklik: 23 piksel
• Genişlik: %57
• Modül Hizalama: Sol

Son olarak, '30px' üst kenar boşluğunu ve '50px' alt kenar boşluğunu ekleyin.

İkinci Metin Modülü

Bölücü yerleştirildikten sonra devam edin ve bir başlık içerecek ikinci Metin Modülünü ekleyin. Her şeyden önce, İçerik sekmesinde arka plan rengi olarak '#000000' kullanın.

Ardından Tasarım sekmesine geçin ve Metin alt kategorisine aşağıdaki ayarları uygulayın:

• Metin Yazı Tipi: Acı
• Metin Yazı Tipi Boyutu: 92px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Sol

Kenarlık alt kategorisini açın ve aşağıdaki kenarlığı kullanın:

• Kenarlık Kullan: Evet
• Kenar Rengi: #000000
• Kenar Genişliği: 3px
• Kenar Stili: Katı

Ayrıca, '%77' Genişlik ve sol Modül Hizalaması kullanın.

Son olarak, Metin Modülünün üst, sağ, alt ve sol dolgusuna '15px' ekleyin.

Üçüncü Metin Modülü

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin. Bu açıklamayı temsil edecek. Tasarım sekmesine gidin ve Metin Alt Kategorisi için aşağıdaki ayarları kullanın:

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Boyutu: 16px
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Sol

Boyutlandırma alt kategorisini açın, Genişlik için '%70'i kullanın ve sol Modül Hizalamasını seçin.

Son olarak, '20px' üst kenar boşluğunu ekleyin.

Beşinci Metin Modülü

Beşinci Metin Modülü, minimalist bir düğme işlevi görür. İçerik sekmesinde, '→' sembolünü + metni kullanın ve arkasına bir bağlantı koyun.

Ardından Tasarım sekmesine gidin. Metin alt kategorisi için aşağıdaki ayarları kullanın:

• Metin Yazı Tipi: Acı
• Metin Yazı Tipi Boyutu: 23px
• Metin rengi: #000000
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Sol

Boyutlandırma alt kategorisiyle karşılaşana kadar aynı sekmeyi aşağı kaydırın. Bu alt kategori içinde, '%49' Genişlik ve doğru Modül Hizalaması kullanın.

Son olarak, '80px' üst kenar boşluğunu ekleyin.

Altıncı Metin Modülü

İhtiyacımız olan altıncı ve son modül, bir öncekiyle neredeyse aynı. '→' + metnini kullanın ve arkasına bir bağlantı koyun.

Metin Alt Kategorisi için ayarlar aşağıdaki gibidir:

• Metin Yazı Tipi: Acı
• Metin Yazı Tipi Boyutu: 23px
• Metin Rengi: #e02b20
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Sol

Genişliği '%39' olarak değiştirin ve doğru Modül Hizalamasını da kullanın.

İkinci sıra

Arka plan rengi

Satır ayarlarını açın ve arka plan rengi olarak 'rgba(255,255,255,0.14)' ekleyin.

Arka plan görüntüsü

Bu gönderinin Photoshop bölümünde oluşturduğunuz görüntülerden birini ekleyin ve Arka Plan Görüntüsü Karışımı olarak 'Ton'u kullanın.

Sütun Yapısı

Standart bölüme eklemeniz gereken ikinci sıra, bir öncekinin tam tersidir.

Klon Modülleri

Önceki satırda kullandığımız modüller, bu satır için ihtiyacımız olan modüllerle aynıdır, bu yüzden devam edin, onları klonlayın ve ikinci sütun yerine ilk sütuna yerleştirin. Bu gönderinin sonraki bölümünde bazı hizalama değişiklikleri yapmamız gerekecek.

İlk Metin Modülü Değişiklikleri

İlk Metin Modülünü açın ve '20px' üst kenar boşluğunu ekleyin.

Bölücü Modül Değişiklikleri

Ardından, Bölücü Modülü açın ve Boyutlandırma alt kategorisindeki Modül Hizalamasını sağa değiştirin.

İkinci Metin Modülü Değişiklikleri

İkinci Metin Modülünün Metin Yönünü sağa ayarlayın.

Ve Boyutlandırma alt kategorisinde de doğru Modül Hizalamasını seçin.

Üçüncü Metin Modülü Değişiklikleri

Üçüncü Metin Modülü de doğru bir Metin Yönlendirmesine ihtiyaç duyacaktır.

Ve ayrıca doğru bir Modül Hizalaması.

Beşinci Metin Modülü Değişiklikleri

Beşinci Metin Modülü için yapmanız gereken tek şey Genişliği '%82' olarak değiştirmek.

Altıncı Metin Modülü Değişiklikleri

Altıncı Metin Modülü için de aynısı geçerlidir ancak bunun yerine '%87'yi kullanın.

Tablet ve Telefon için Bölümü Gizle

İki satırı bitirdikten sonra, devam edip tüm bölümü telefon ve tablette devre dışı bırakabilirsiniz.

Tablet & Telefon Kataloğu (Yeni Bölüm)

Her şeyin tablet ve telefonda da harika görünmesini sağlamak için yeni bir standart bölüm oluşturacağız.

Bölüm Ayarları

Arka plan rengi

Bu bölümün arka plan rengi olarak '#FFFFFF' ekleyin.

Özel Dolgu

Tasarım sekmesine gidin ve '15 piksel' bir üst dolgu ekleyin.

İlk sıra

Sütun Yapısı

Ardından, bölüme iki sütunlu bir satır ekleyin.

boyutlandırma

Bu satırın Boyutlandırma alt kategorisine gidin ve aşağıdaki değişiklikleri yapın:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Görüntü Modülü

Arka plan görüntüsü kullanmak yerine, bunun yerine bir Görüntü Modülü kullanacağız. Bu şekilde, metin ve görüntünün üst üste gelmeyeceğinden emin olacağız. Devam edin ve satırın ilk sütununa bir resim modülü ekleyin ve bir resim yükleyin.

Masaüstü Sürümünde İlk Satırın Modüllerini Klonla

Ardından, masaüstü sürümünün ilk satırında kullandığınız tüm modülleri klonlayın ve ikinci sütuna yerleştirin.

İkinci Metin Modülü Yazı Tipi Boyutunu Değiştir

Değiştirilmesi gereken tek bir şey var; ikinci Metin Modülünün yazı tipi boyutu. 65px olarak değiştirin.

İkinci sıra

Sütun Yapısı

Ardından, devam edin ve bölüme iki sütunlu bir satır daha ekleyin.

boyutlandırma

Bu satır, değiştirilmiş bir Boyutlandırma alt kategorisine de ihtiyaç duyacaktır:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Görüntü Modülü

Görüntü Modülünü de ilk sütuna ekleyin ve bir görüntü yükleyin.

Masaüstü Sürümünde İkinci Satırın Modüllerini Klonla

Ardından, devam edin ve masaüstü sürümünün ikinci satırına yerleştirilmiş modülleri kopyalayın. Bunları klonladıktan sonra, bu satırın ikinci sütununa yerleştirin.

İkinci Metin Modülü Yazı Tipi Boyutunu Değiştir

İkinci Metin Modülünün metin boyutunun da değiştirilmesi gerekiyor. Devam edin ve ona '65px' yazı tipi boyutu verin.

Masaüstü için Bölümü Gizle

Her iki satırı da bitirdikten sonra, devam edip tüm bölümü masaüstünde devre dışı bırakabilirsiniz.

Sonuç

Et voila, bu gönderideki tüm adımları izledikten sonra, masaüstünde aşağıdaki sonucu elde etmelisiniz:

Ve telefonda ve tablette aşağıdakiler:

Son düşünceler

Bu gönderide, size güzel bir kayan moda kataloğunu nasıl oluşturabileceğinizi gösterdik. Tasarımımızın işe yaraması için ilk olarak Photoshop ile görselinizin içinde nasıl şeffaf bir şekil yapacağınızı gösterdik. Daha sonra, tasarımı oluşturmak için Divi eğitimimizde bu görüntüleri kullandık. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!

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!

Rvector / Shutterstock.com tarafından Öne Çıkan Görsel