Divi Düzenlerinde Cihaz Ekranı Modellerini Yaratıcı Bir Şekilde Kullanma

Mockup'ları kullanmak, web sitenize çok ihtiyaç duyulan profesyonellik duygusunu getirmenin en kolay yollarından biridir. Özel ihtiyaçlarınıza göre ayarlayabileceğiniz ücretsiz örnekler sunan birçok site var; Bu gönderide en iyilerinden bazılarının bir listesini oluşturduk.

Modellere başlamanıza yardımcı olmak için, Divi'nin en iyi yerleşik tasarım seçenekleriyle birlikte web sitenizi öne çıkarmak için dizüstü bilgisayar ekranı modelini nasıl kullanabileceğinizi göstereceğiz. Bu eğitim, önceki çalışmaları sergileyeceğiniz bir portföy sayfası oluşturuyorsanız harikadır.

Öğreticiye dalmadan önce, elde edeceğimiz sonuca bir göz atalım.

Masaüstünde Sonuç

Mobilde Sonuç

Bu Eğitimin Ücretsiz Ekran Modelini İndirin

Bu öğreticiyi iyi bir şekilde tamamlamanıza yardımcı olmak için, size bu eğitimde kullanılan maketi ücretsiz olarak sağlayacağız. Aslında, (yeniden) paylaştığımız kaynak aslında Tasarım Ajansı Düzen Paketimizden olduğu için size iki cihaz maketi ve birkaç yüksek kaliteli görüntü sunuyoruz. Aşağıdaki resim kaynaklarını indirdiğinizde, klasörü açıp takip etmek için MB-purefront.psd adlı dosyayı bulabilirsiniz.

Ücretsiz Ekran Modelini İndirin

Divi Düzenlerinde Cihaz Ekranı Modellerini Yaratıcı Bir Şekilde Kullanma

Youtube Kanalımıza Abone Olun

Photoshop ile Maketi Değiştirin

Modeli indirdikten sonra, ihtiyaçlarınıza göre değiştirebilirsiniz. Dosyayı açarak başlayın.

Arka Plan Katmanını Gizle

Dosyayı açtıktan sonra yapmanız gereken ilk şey, katmanlarınızın altında arka plan rengi olan katmanı devre dışı bırakmaktır:

Ekran Katmanına Çift Tıklayın

Ardından, aşağıdaki katmanın simgesine çift tıklayın:

Ekran modelinizde görünen resmi içeren yeni bir sekme göreceksiniz.

Yeni Sekme Oluşturmak İçin Resminizi Sürükleyin

Ardından ekranınız için kullanmak istediğiniz görseli sekmelere sürükleyin. Bu resmi içeren yeni bir sekmenin göründüğünü göreceksiniz. Kullanmakta olduğunuz görüntünün ekrana tam olarak sığması için tercihen '1440px' genişliğinde ve '900px' yüksekliğinde olması gerekir.

Görüntüyü Kopyala ve Ekran Katmanına Yapıştır

Ardından resmi kopyalayın ve açtığınız ekran katmanına yapıştırın. Doğru genişlik ve yüksekliği kullanırsanız, görüntünün mükemmel bir şekilde sığacağını ve yeni bir katman oluşturulacağını göreceksiniz. Ancak, görüntünüz beklenenden daha büyükse, görüntüyü sığdırmak için her zaman CTRL + T (Windows'ta) veya Command + T (Mac) tuşlarını kullanarak ayarlayabilirsiniz.

Katmanları birleştirmek

Yeni görüntüyü ekran katmanınıza ekledikten sonra her iki katmanı da seçin ve birleştirin.

CTRL + S veya KOMUT + S

Katmanlar birleştirildikten sonra, devam edip CTRL + S (Windows'ta) ve Command + S (Mac'te) kullanarak katmanı kaydedebilirsiniz.

Web için Resmi Kaydet

Daha sonra maketinize geri dönerseniz ekranınızın değiştiğini göreceksiniz.

Artık görüntüyü dışa aktarmaya hazırsınız. Bunu yapmak için Dosya > Dışa Aktar > Web için Kaydet > PNG dosyası olarak kaydet'e gidin.

Yeni Bölüm Ekle

Photoshop kullandığımız kısmı geçtiğimize göre artık Divi'ye geçme zamanı.

Bu eğitim için yalnızca bir standart bölüme ihtiyacımız olacak. Devam edin, yeni bir sayfa ekleyin ve herhangi bir ek ayar yapmadan yeni bir standart bölüm oluşturun.

Masaüstü Satırı Oluştur

Bu gönderide daha önce bahsedildiği gibi, masaüstü bilgisayarlar, tabletler ve telefonlarla eşleşen ekran maketleriyle nasıl portföy sayfası oluşturacağınızı göstereceğiz. Masaüstü sürümüyle başlayacağız ve bu bölümü geçtikten sonra, masaüstü ayarlarının çoğunu yeniden kullanacağımız için mobil sürümü oluşturmanın çok daha kolay olacağını göreceksiniz.

Satır Ayarları

İki eşit sütunlu bölümünüze yeni bir satır ekleyerek başlayın.

Satır Arka Plan Rengi

Satırın ayarlarını açın ve arka plan rengi olarak '#035372'yi seçin.

Satır Arka Plan Resmi

Ardından arka plan resmi sekmesine geçin, ekran modelini yükleyin ve aşağıdaki ayarları seçin:

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Normal

Sütun 2 Arka Plan Rengi

İçerik sekmesini aşağı kaydırın ve Sütun 2 Arka Plan Rengi olarak 'rgba(25,46,58,0.85)'i kullanın.

boyutlandırma

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

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

aralık

Devam ederek, üstüne ve altına özel bir '0px' dolgusu ekleyin.

görünürlük

Son olarak, telefon ve tablette satırı devre dışı bırakın.

Başlık Metin Modülü Ekle

Tüm satır ayarlarını yaptıktan sonra, satırınızın ikinci sütununa ilk Metin Modülünü ekleyin.

Metin Ayarları

Metni İçerik Kutusuna ekledikten sonra Tasarım sekmesine gidin ve Metin alt kategorisi için aşağıdaki ayarları kullanın:

• Metin Yazı Tipi: Karabatak Unicase
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Boyutu: 70px
• Metin Rengi: #FFFFFF
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Sol

aralık

Ve aşağıdaki özel dolguyu kullanın:

• Üst Dolgu: 150 piksel
• Alt Dolgu: 50px
• Sol Dolgu: 50px
  

Açıklama Metni Modülü Ekle

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin.

Metin Ayarları

Bu Metin Modülünün Metin alt kategorisi için aşağıdaki ayarları kullanın:

• Metin Yazı Tipi: Oyuncu
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 13px
• Metin Rengi: #eded
• Metin Satırı Yüksekliği: 1.7em
• Metin Yönü: Sol

boyutlandırma

Ardından, Boyutlandırma alt kategorisinde '%67' genişlik kullanın.

aralık

Son olarak, '30px' alt dolgusu ve '50px' sol dolgu ekleyin.

Düğme Modülü Ekle

Bu satıra eklememiz gereken son modül Düğme Modülüdür.

hizalama

Düğme Modülünü ekledikten sonra yapmanız gereken ilk şey, bir sol Düğme Hizalaması seçmektir.

Buton

Ardından Tasarım sekmesine gidin ve Düğme alt kategorisi için aşağıdaki ayarları kullanın:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 14px
• Düğme Metin Rengi: #035372
• Düğme Arka Plan Rengi: #FFFFFF
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel
• Düğme Harf Aralığı: 0px
• Düğme Yazı Tipi: Oyuncu
• Yazı Ağırlığı: Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Ardından, Düğme Modülüne aşağıdaki özel kenar boşluğunu ve dolguyu ekleyin:

• Alt Kenar Boşluğu: 150 piksel
• Sol Kenar Boşluğu: 50px
• Üst Dolgu: 10px
• Sağ Dolgu: 30px
• Alt Dolgu: 10px
• Sol Dolgu: 30px

Kutu Gölge

Son olarak, düğmeye biraz daha fazla parlaklık vermek için aşağıdaki kutu gölgesini ekleyin:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Kutu Gölge Bulanıklığı Gücü: 41px
• Kutu Gölge Yayılma Gücü: 4px
• Gölge Rengi: rgba(255,255,255,0.3)
• Kutu Gölge Konumu: Dış Gölge

Satırı Gerektiği Kadar Kez Klonlayın

Yukarıda bahsedilen tüm adımları tamamladıktan sonra, devam edip satırı istediğiniz kadar klonlayabilirsiniz. Sadece aşağıda bahsedeceğimiz küçük bir değişiklik yapmanız gerekecek.

Satır Arka Plan Rengini ve Resmini Değiştir

Yapmanız gereken ilk şey, sıranızın ekran maketini ve arka plan rengini değiştirmek. Yeniden oluşturduğumuz örnek için ikinci satır için '#600026' ve üçüncü satır için '#876700' kullanıyoruz.

Sütun 2 Arka Plan Rengini Değiştir

Sütun 2 Arka Plan Renginin de değiştirilmesi gerekiyor. Örneğimizdeki ikinci satır 'rgba(40,0,14,0.85)' ve üçüncü satır 'rgba(56,46,0,0.85)' kullanır.

Mobil Satır Oluştur

Artık masaüstü sürümünü oluşturduğumuza göre, mobil ve tablet sürümünü oluşturmak çok daha hızlı olacak.

Masaüstü Satırını Klonla

Bu gönderinin önceki bölümünde oluşturduğunuz masaüstü satırını klonlayarak başlayın.

Satır Arka Planını Kaldır

Bunu yaptıktan sonra, satır ayarlarını açmanız ve satırın Arka Plan alt kategorisindeki ekran modelini silmeniz gerekir.

Masaüstünde Devre Dışı Bırak

Ardından, Gelişmiş sekmesine gitmeniz ve satırı tablet ve telefon yerine masaüstünde devre dışı bırakmanız gerekir.

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

Ardından, devam edin ve bu satırın ilk sütununa bir Görüntü Modülü ekleyin. Bu Görüntü Modülü, masaüstü sürümünde kullandığımız satır arka plan görüntüsünü bir nevi 'değiştirecek'.

Başlık Metin Modülünü Değiştir

Orta Metin Yönü

Ardından, Metin Modülünüzü açın ve Metin alt kategorisindeki Metin Yönlendirmesini 'Merkez' olarak değiştirin.

Sol Dolguyu Kaldır

Ve sol dolguyu da çıkarın.

Açıklama Metni Modülünü Değiştir

Orta Metin Yönü

Devam ederek, ikinci sütununuzdaki ikinci Metin Modülünü açın ve Metin Yönlendirmesini 'Merkez'e getirin.

Merkez Modül Hizalaması

Ardından, Boyutlandırma alt kategorisini açın ve bir orta Modül Hizalaması seçin.

Sol Dolguyu Kaldır

Son olarak, bu Metin Modülünün sol dolgusunu da kaldırın.

Düğme Metin Modülünü Değiştir

Orta Düğme Hizalaması

Ayrıca Düğme Modülünüzün Düğme Hizalamasını 'Merkez' olarak değiştirmeniz gerekecektir.

Sol Kenar Boşluğunu Kaldır

Ve sol kenar boşluğunu kaldırın.

Satırı Gerektiği Kadar Kez Klonlayın

Yine, bu mobil sürümü istediğiniz kadar kopyalayabilir ve üzerinde küçük değişiklikler yapabilirsiniz.

Satır Arka Plan Rengini Değiştir

Bu değişikliklerden biri, örnekteki satır arka plan rengini ikinci satır için '#600026' ve üçüncü satır için '#876700' olarak değiştirmektir.

Sütun 2 Arka Plan Rengini Değiştir

Ve Sütun 2 Arka Plan Rengini ikinci satır için 'rgba(40,0,14,0.85)' ve üçüncü satır için 'rgba(56,46,0,0.85)' olarak değiştirin.

Görüntü Modülünde Görüntüyü Değiştir

Son olarak, oluşturduğunuz yeni sürümlerin her birinde ekran maketlerini de değiştirmeniz gerekecektir. Tabii ki, bunların masaüstü sürümünüzle uyumlu olduğundan emin olun.

Sonuç

Masaüstünde Sonuç

Mobilde Sonuç

Son düşünceler

Bu yazıda, güzel sonuçlar elde etmek için Divi'nin tasarım seçenekleriyle birlikte ekran maketlerini nasıl yaratıcı bir şekilde kullanabileceğinizi gösterdik. Size nasıl oluşturulacağını gösterdiğimiz düzen, ziyaretçilerinize önceki çalışmaları sergilediğiniz portföy sayfaları için idealdir. 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!