Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, düzeni Divi Food Catering düzeni paketini kullanarak yeniden kullanılabilecek bir çerçeve görüntüsüne nasıl değiştireceğinizi göstereceğiz. Çerçeve görüntüleri, web siteleri oluşturmanın ilk süreci için çok iyidir. Web sitesinin tüm yapısı ve tasarım stiline karar vermenize yardımcı olurlar. Ayrıca, önce her şeyi ayarlamak zorunda kalmadan müşterinin tasarım stili hakkındaki görüşlerini almaya yardımcı olabilirler.
Haydi Yapalım şunu! Önizleme girmeden önce, yapacağımız nihai sonuca bakalım.
Düzeni tel kafes olarak değiştirin Gıda Catering yön sayfasını görsel bir inşaatçı ile açın ve Divi Food Catering Düzeni paketini kullanarak yaptığınız yön sayfasını açın.
Arka plan başlığının tam kısmını, bir iskelet görüntüsü yapmak için ilk adımın arka plan rengini ve arka planını kaldırın Tüm arka plan görüntülerini, gradyanın arka planını ve sayfanızdaki parçanın arka plan rengini ve tam geniş başlığını kaldırmaktır. Kahramanda modül.
Sayfa tasarımınızdaki farklı parçaları belirlemeye yardımcı olmak için dönüşümlü olarak gri arka plan rengi verin, devam edin ve her bölüme dönüşümlü olarak arka plan rengini ‘#f9f9fb’ verin. Ardından, bir sayfa oluşturmak için bir çerçeve görüntüsü kullandığınızda, sayfanıza bir renk paleti eklemek için Bulunma ve Değiştir özelliğini kullanabilirsiniz. Bu şekilde, bir sayfa oluştururken ondan etkilenmeyeceğiz. Sayfanızdaki düğme modüllerinden birini açın ve tüm geçerli ayarları görmek için değiştirilmiş stil filtresini etkinleştirin.
Koyu Arka Plan Düğmesi Modülü ve Sınır Rengi Düğmenin arka plan rengini ve düğmenin kenar rengini ‘#2B2B2B’ olarak değiştirin.
Düğme stilini kopyalayın ve diğer düğmelere uygulayın Düğme ayarlarını sağ tıklayarak ve ‘Stil düğmesini kopyalayarak’ tıklayarak düğme stilini kopyalayarak devam edin. Ardından, sayfadaki kalan düğme modüllerinin her birine düğme stilini ekleyin.
Ekstra Tasarım Ayarlarını Sil (Kutu Gölgesi Gibi) Gölge Kutusu düğmemizi kaldır, Box Shadow gibi ek öğeleri de siler. Üzerinde çalıştığınız aynı düğme modülünü açın ve kutunun gölgesini tamamen silin.
Modül Modülü Modül Ayarlarını Kopyala Bu düğme modülünden Gölge Stili Kutusu stilini ayarlayın ve kalan düğme modülüne de ekleyin.
Kutu Gölgesini Kahramanda Manuel olarak silin ve Box Gölgesinden manuel olarak silinmesi gereken yalnızca iki düğme ile iletişime geçin. Bu düğmeler çeşitli tasarım öğelerine sahip modülün bir parçasıdır, bu nedenle manuel olarak silmemiz gerekir. CTA ile aynı arka plan rengini vurgulayan parçayı verin, sonra ‘vurgulanan’ kısmı bulana kadar aşağı kaydırın. Burada, ‘#2B2B2B’ bölümünün arka plan rengini kullanın. Aynı renk CTA için kullanılır.
Düzen düzenimizin konusunu tamamen silmek için medya kütüphanesine giden görüntünün boyutlarını belirleyin, tüm görüntü modüllerini gerekli görüntü boyutlarını içeren yer tutucularla değiştireceğiz. Bu boyutu bulmak için medya kitaplığınızı açın.
Kullanılmış kullanılmış görüntüleri, sayfanıza ayrı ayrı dahil edilen her görüntüyü ayrı ayrı açın.
Sayfada çeşitli görüntü boyutlarını yazın, bunu yaptıktan sonra, görüntünün boyutlarını özellikle görebileceksiniz. Bir sonraki adıma geçmeden önce ihtiyacınız olan tüm boyutları sayfanızda bir yere yazarak izleyin.
Açık Photoshop boyutlarıyla bir yer tutucu yapın Bir yer tutucu yapma zamanı! Photoshop’u veya diğer resim düzenleme yazılımını açın.
Sayfanızdaki her boyut kümesi için yeni projeler için boyutlar için yeni projeler oluşturun. Bizim durumumuzda, aşağıdaki boyutların her biri için ayrı bir projeye ihtiyacımız var:
800×1029
400×400
48×48
Gri Renk Seçin Renginiz olarak ‘#E7E8ED’ seçin.
Arka plan katmanını kilitleyin Arka plan katmanı kilitinizi de açın.
Boya Kovası Aracı’yı seçin ve katmana renk ekle, ardından tuvalinizi gri renklendirmek için boya kovası aracını kullanın. Görüntü boyutunu izlemenize yardımcı olmak için boyutları olan metin ekleyin, yer tutucunuzun ortasına boyutlar da ekleyebilirsiniz. Bu şekilde, değiştireceğiniz görüntüyü düzenledikten sonra sayfanız için hangi görüntü boyutlarına ihtiyacınız olduğunu bileceksiniz.
Web için kaydedin, bittiğinde, görüntü yer tutucunuzu web için kaydedin.
Sayfadaki görüntünün her bir boyutu için tekrarlayın Bu adımları sayfanızdaki her boyut kümesi için tekrarlayın. Bu sayfa için toplam üç farklı sete ihtiyacınız var:
800 x 1029 (bir parçamız
400 x 400 (galeri bölümü)
48 x 48 (simge)
Tüm yer tutucularınızı dışa aktardıktan sonra, görüntüyü değiştirip değiştirdikten sonra görüntüleri yer tutucu ile değiştirin.
Tel çerçeve yapmak, tel çerçeve oluşturmayı bitirdikten sonra bilgisayarda tel kafes haritası yapmak için tekrar kullanımı kolaydır, görünümü bir yere kaydetmelisiniz. Bilgisayarınızda bir yerde yeni bir klasör oluşturun.
Ekran görüntüleri düzeni ve yerel olarak kaydedin, sayfanızı yakalamak için ekran görüntüleri seçiminizin eklentisini/uzantısını kullanın. Aşağıdaki resimde Mozilla Firefox için eklenti Fireshot kullandık. Bir ekran görüntüsü tuttuğunuzda ona doğru adı verdiğinizden emin olun.
Düzeni aynı addaki kütüphaneye kaydedin, çerçeve görüntüsünün düzenini divi kitaplığınıza saklamak için ekran görüntüleri için kullandığınız adı kullanın. Bu, sayfalarınızdan birine yüklemeden önce bilgisayarınızdaki çerçeve görüntüsünü görmenizi sağlar.
Kişiselleştirilmiş Kable ile Tasarım Ayarlarını Değiştirin Bölümcünün bir kısmını sayfa başına bir çerçeve çizimi yapmakla sınırlandırmayan bir kısmını ekleyin. Yeni çerçeve görüntüleri oluşturmak için tasarım ayarlarını kolayca değiştirebilirsiniz. Örneğin, benzersiz tasarımlar oluşturmak için bölücülerle oynayabilirsiniz. Tipografi ile oynama yapmak, başlık yazı tipinde bulgu bulma ve değiştirme veya tipografi ile de oynayabilirsiniz. Kahramanınızdaki tam geniş başlık modülünü açın ve başlık yazı tipini sağa tıklayın. Bulgu ve değiştirme özelliklerini etkinleştirerek devam edin.
Yazı Tiplerini Değiştirme Sayfanızda kullanılan yazı tipini başka biriyle değiştirin ve yeni bir çerçeve resminiz var!
Icon Click kategorisini kullanarak ayrı bir tasarım öğesi kaydedin ‘Kütüphaneye Ekle’ Yapabileceğiniz başka bir şey, belirli tasarım öğelerini sayfanızda ayrı ayrı kaydetmektir. Örneğin, bir kahraman koleksiyonu yapmak istiyorsunuz, kahramanınızın kısmını Divi kütüphanenize kolayca ekleyebilirsiniz.
Yeni bir kategori ekleyin ve daha organize bir yapıya sahip olmak için tasarım öğelerini adlandırın, ‘Kahraman Bölümü’ adlı yeni bir parça kategorisi ekleyerek devam edin, böylece seçtiğiniz kahraman bölümünü kolayca bulabilir ve tüm tasarımları keşfedebilirsiniz. mağaza.
Önizleme Şimdi tüm adımlardan geçtik, sonucuna bakalım.
