Divi Düzeninde Mockup Division ekranını kullanmanın yaratıcı yolları
Bir maket kullanmak, web sitenize ihtiyaç duyulan bir profesyonellik duygusu getirmenin en kolay yollarından biridir. Orada özel ihtiyaçlarınıza göre ayarlayabileceğiniz ücretsiz maketler sunan birçok site var; Bu yazıdaki en iyilerinden bazılarının bir listesini yaptık. Ve bir maketle başlamanıza yardımcı olmak için, web sitenizin Divi’nin en iyi varsayılan tasarım seçenekleriyle birlikte parlamasını sağlamak için bir dizüstü bilgisayar ekran modelini nasıl kullanabileceğinizi göstereceğiz. Önceki çalışmayı sergilediğiniz bir portföy sayfası oluşturursanız bu öğretici çok iyidir.
Öğreticiye girmeden önce elde edeceğimiz sonuçlara bakalım. Masaüstündeki sonuçlar
Mockup Ücretsiz Ekran İndir Divi Düzeninde Mockup Division ekranını kullanmak için Yaratıcı Yollar YouTube Kanallarına Abone Olduğumuz Mockup ile Mockup’u Değiştirdiğimiz Mockup’u indirdikten sonra, ihtiyaçlarınıza göre değiştirebilirsiniz. Dosyayı açarak başlayın. Dosyayı açtıktan sonra arka plan katmanını gizle, yapmanız gereken ilk şey katmanı katmanınızın altındaki arka plan rengi ile devre dışı bırakmaktır: Bir sonraki ekran katmanına çift tıklayın, aşağıdaki katman simgesine çift tıklayın: Ekran maketinizde görünen görüntüleri içeren yeni bir sekme göreceksiniz. Yeni bir sekme oluşturmak için resminizi sürükleyin, ekranınız için kullanmak istediğiniz görüntüyü sekmeye sürükleyin. Bu resmi içeren yeni bir sekme göreceksiniz. Kullandığınız görüntülerin ekrana uyması için ‘1440px’ ve yükseklik ‘900px’ genişliği olmalıdır. Görüntüyü kopyalayıp bir sonraki ekran katmanına yapıştırın, görüntüyü kopyalayın ve açtığınız ekran katmanına yapıştırın. Göreceksiniz, doğru genişliği ve yüksekliği kullanırsanız, görüntünün mükemmel bir şekilde sığacağını ve yeni katmanın oluşturulacağını göreceksiniz. Ancak, görüntünüz beklenenden daha büyükse, doğru görüntü yapmak için CTRL + T (Windows’ta) veya Command + T (Mac) kullanarak her zaman ayarlayabilirsiniz. Ekran katmanınıza yeni bir resim ekledikten sonra katmanı birleştirin, her iki katman seçin ve birleştirin. CTRL + S veya Command + S Katman birleştirildikten sonra, Ctrl + S (Windows’ta) ve Command + S (Mac’te) kullanarak katmanları devam edip saklayabilirsiniz. Web için resimler kaydedin, eğer maketinize dönerseniz, ekranınızın değiştirildiğini göreceksiniz. Artık görüntüleri dışa aktarmaya hazırsınız. Bunu yapmak için dosyayı açın> Dışa Aktar> Web için Kaydet> PNG dosyası olarak kaydedin. Yeni bir parça ekleyin Şimdi Photoshop kullandığımız parçayı geçtik, Divi’ye geçme zamanı. Bu öğretici için sadece bir standart parçaya ihtiyacımız var. Lütfen yeni bir sayfa ekleyin ve ek ayarlar olmadan yeni bir standart parça oluşturun. Masaüstü Hattı Yapın
Bu yazıda daha önce belirtildiği gibi, masaüstü, tablet ve cep telefonuyla eşleşen bir ekran maketine sahip bir portföy sayfasının nasıl oluşturulacağını göstereceğiz. Masaüstü sürümüyle başlayacağız ve bu bölümü geçtikten sonra, çoğu masaüstü ayarını yeniden kullanacağımız için hücresel sürüm yapmanın çok daha kolay olacağını göreceksiniz. Satır ayarları aynı iki sütunla kendi tarafınıza yeni satırlar ekleyerek başlar. Satırın arka plan rengi satır ayarlarını açar ve arka plan rengi olarak ‘#035372’ seçin. Arka plan görüntüleri satır sonra arka plan görüntüsü sekmesine geçin, ekran maketini yükleyin ve aşağıdaki ayarları seçin:
Arka plan görüntü boyutu: uygun Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Arka Plan Görüntü Karışımı: Normal
Sütun 2’nin arka plan rengi içerik sekmesini aşağı kaydırın ve sütun 2’nin arka plan rengi olarak ‘RGBA (25,46,58.0.85)’ kullanın.
Yapıştırıcı Ardından, Tasarım sekmesine devam edin ve alt kategori boyutu için aşağıdaki ayarları kullanın: Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Sonraki mesafe, üst ve altta özel dolgu ‘0px’ ekleyin.
Son görünürlük, cep telefonları ve tabletlerdeki satırları devre dışı bırakın. Başlık metin modülünü ekleyin Tüm satır ayarlarına sahip olduktan sonra, ilk metin modülünü satırınızın ikinci sütununa ekleyin. Metin Ayarları İçerik kutusuna metin ekledikten sonra tasarım sekmesine devam edin ve metin alt kategorisi için aşağıdaki ayarları kullanın: Metin yazı tipi: Unicase Cormorant Metin yazı tipi ağırlığı: kalınlık
Metin Boyutu: 70px
Metin rengi: #ffffff
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Sol
Mesafe ve aşağıdaki özel rulmanı kullanın: Üst Dolgu: 150 piksel
Dolgu Alt: 50 piksel Sol dolgu: 50 piksel
Açıklama Metin Modülünü Ekleyin 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: aktör
Metin yazı tipi ağırlığı: normal Metin Boyutu: 13px
Metin rengi: #eded
Hat yüksekliği metni: 1.7em
Metin Oryantasyonu: Sol
Bir sonraki yapıştırıcı, boyut alt kategorisinde ‘%67′ genişliğini kullanır.
Son mesafe, dolgu tabanını ’30px’ ekleyin ve sol dolgu ’50px’ ekleyin.
Bu satıra eklememiz gereken son modül düğmesi modülünü ekleyin Düğme modülü. Düğme modülünü ekledikten sonra yapmanız gereken ilk şeyin hizalanması, sol düğme hizalamasını seçmektir. Düğme Ardından, Tasarım sekmesine devam edin ve düğme kategorisini altleştirmek için aşağıdaki ayarları kullanın: Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 14px Metin Renk Düğmesi: #035372
Arka plan renk düğmesi: #ffffff
Düğmenin sınır genişliği: 0px
Yarıçap düğmesi sınırı: 100 piksel
Mektup Mesafe Düğmesi: 0px
Yazı tipi düğmesi: aktör
Mektup Ağırlığı: Kalın
Yazı tipi stili: büyük harf
Sonraki mesafe, düğme modülüne aşağıdaki özel marj ve dolguyu ekleyin:
Alt kenar boşluğu: 150 piksel
Sol kenar boşluğu: 50 piksel Üst dolgu: 10 piksel
Sağ dolgu: 30px
Dolgu Alt: 10 piksel
Sol dolgu: 30px
Son kutu gölgesi, ekstra ışık için bir düğme vermek için kutunun aşağıdaki gölgesini ekleyin:
Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 2px Bulanık Güç Gölgesi Kutusu: 41px
Kutunun gölgesinin dağılımının gücü: 4px
Gölge Renk: RGBA (255,255,255.0.3)
Kutu Gölgesi Pozisyonu: Dış Gölge
Klon satırı, yukarıda belirtilen tüm adımları tamamladıktan sonra gerektiği kadar sıktır, devam edebilir ve ihtiyacınız olduğu kadar çok satır klonlayabilirsiniz. Sadece aşağıda bahsedeceğimiz küçük bir değişiklik yapmanız gerekir. Yapmanız gereken ilk şeyin renk ve arka plan görüntüsünü değiştirin, satırınızın ekran maketini ve arka plan rengini değiştirmek. Yeniden yaptırdığımız örnek için, ikinci sıra için ‘#600026’ ve üçüncü satır için ‘#876700’ kullanıyoruz. Arka plan renk sütunu 2 renk renk sütunu 2’nin de değiştirilmesi gerekiyor. Örnekteki ikinci sıra ‘RGBA (40,0,14,0.85)’ kullanıyoruz ve üçüncü sıra ‘RGBA (56,46,0,0.0.85)’ kullanıyoruz.
Hücresel bir satır oluştur şimdi bir masaüstü sürümü yaptık, hücresel sürüm ve tabletin çok daha hızlı olacağını sağladık.
Masaüstü klon satırı, bu yazının önceki bölümünde oluşturduğunuz masaüstü hattını klonlayarak başlar. Satırın arka planını kaldırdıktan sonra, satır ayarlarını açmalı ve arka plan satır arka plan alt kategorisindeki ekran maketini silmeniz gerekir. Masaüstünde devre dışı bırakın Daha sonra, gelişmiş sekmeyi açmalı ve masaüstünde tabletlerde ve cep telefonlarında değil, satırları devre dışı bırakmalısınız. Görüntü modülünü ilk sütuna ekleyin, devam edin ve görüntü modülünü bu satırın ilk sütununa ekleyin. Bu görüntü modülü, masaüstü sürümünde kullandığımız arka plan görüntülerini ‘değiştirir’. Metin Modülü Başlık Yönlendirme Tengah Metin Ardından, metin modülünüzü açın ve metin yönünü metin alt kategorisinde ‘orta’ olarak değiştirin. Sol dolguyu çıkarın ve sol yatağı da çıkarın. Metin Modülünü Değiştirin Bir sonraki orta metin yönünün açıklamasını değiştirin, ikinci sütununuzdaki ikinci metin modülünü açın ve metin yönünü ‘orta’ olarak yerleştirin. Merkezi modül merkezi için merkeze koyun, boyut alt kategorisini açın ve orta modülün hizalanmasını seçin . Son sol dolguyu silin, bu metin modülünün sol dolgusunu da silin. Orta düğme hizalama düğmesinin metin modülünü değiştirin Düğme modülünden ‘orta’ olarak düğme hizalamasını da değiştirmeniz gerekir. Sol kenar boşluğunu çıkarın ve sol kenar boşluğunu silin. Klon satırı bir kez daha gerektiği kadar sık, bu hücresel versiyonu ihtiyacınız olduğu kadar klonlayabilir ve bazı küçük değişiklikler yapabilirsiniz. Satırın arka plan rengini değiştir değişikliklerden biri, satırın arka plan rengini ikinci sıra için ‘#600026’ ve örnekteki üçüncü satır için ‘#876700’ olarak değiştirmektir. Sütun 2’nin arka plan rengini değiştirin ve ikinci sıra için 2 sütunun arka plan rengini ‘RGBA (40,0,14,0.85)’ olarak değiştirin ve üçüncü için ‘RGBA (56,46,0,0.0.85)’ ‘ sıra. Son Görüntü Modülündeki görüntüyü değiştirin, oluşturduğunuz her yeni sürümde ekran maketini de değiştirmeniz gerekir. Tabii ki, bunun masaüstü sürümünüzle eşleştiğinden emin olun. Masaüstündeki sonuçlar Hücresel sonuçlar
