Divi ile bir sonraki projeniz için çok görsel bir hizmet bölümü nasıl oluşturulur
Web sitenizde hizmet sunma şekliniz şirketiniz hakkında birçok şey gösterir. Sadece mesajın net olmasını istemezsiniz, aynı zamanda hizmetlerinizi profesyonel ve çekici bir şekilde paylaşmak istersiniz. Divi ile, iletmek istediğiniz mesajı kaldıran sonsuz bir tasarım yapabilirsiniz. Bu yazıda, şaşırtıcı hizmet bölümünü, ihtiyaçlarınıza göre değiştirebilmeniz için bunu yapmak için kullanılan Photoshop resimleri ve dosyalarıyla birlikte paylaşacağız. Ayrıca, varsayılan Divi seçeneğini kullanarak aynı sonuçları nasıl elde edeceğinizi adım adım göstereceğiz.
Sonuçlar her zamanki gibi, öğreticiye girmeden önce, farklı bir ekran boyutunda yeniden yapacağımız hizmet bölümüne bakalım. Masaüstünde
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Divi ile bir sonraki projeniz için çok görsel bir hizmet bölümü nasıl oluşturulur
YouTube kanalına abone Olgrasyon arka plan bölümünün hizmet bölümünü yeniden oluşturuyoruz, standart bölümü ekleyerek başlayın ve bunun için aşağıdaki gradyan arka planını kullanın:
Birinci renk: #f2f2f2
Renk İkinci: #ffffff
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Sütun yapısı satırını ayarlayın, parçanıza aşağıdaki sütun yapısına sahip satırlar ekleyin: Sütun 2 Arka Plan Görüntüsü, ikinci sütununuzun arka plan görüntüsü olarak ‘gradyan-square.png’ görüntü dosyasını ekleyerek devam edin. İndirdiğiniz klasörde bulunan Photoshop dosyasını açarak bu kutunun rengini her zaman değiştirebilirsiniz. Arka plan görüntüsü ile eşzamanlı olarak aşağıdaki ayarları kullanın: Sütun 2 Arka Plan Görüntü Boyutu: Gerçek Boyut
Sütun 2 Arka Plan Görüntü Pozisyonu: Alt Orta
Sütun Arka Planının Tekrarlanması Resim 2: Tekrar yok
Sütun 2 Karışık Arka Plan Görüntüsü: Normal
Yapıştırıcı daha sonra, boyut alt kategorisine devam edin ve aşağıdaki düzenlemeleri uygulayın: Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliğini kullanın: Yalebar Talang: 2
Resim Modülü Photoshop dosyasında kendi resminizi kullanın satır ayarlarını tamamladıktan sonra ikinci sütuna bir resim modülü ekleyebilirsiniz. İndirme klasöründe bulabileceğiniz ‘image.png’ görüntü dosyasını kullanabilirsiniz. Bu görüntüyü herhangi bir sınırsız kullanmakta özgürsünüz. Veya Photoshop dosyasını ‘Image-collate.psd’ dosyasını açabilir ve web sitenize uygun görüntüleri değiştirebilirsiniz.
Tasarım sekmesinde hizalayın, görüntü modülünüzün sayfanıza odaklanması için orta görüntü seviyesini kullanın. Geçerli metin ayarlarının altındaki metin modülü, eklediğiniz görüntünün hemen altına (aynı sütunda) metin modülünü ekleyin ve aşağıdaki metin ayarlarını kullanın:
Metin Yazı Tipi: Abril Fatface Metin yazı tipi ağırlığı: normal
Metin yazı tipi stili: çapraz
Renk Çapraz Metin: RGBA (233,193,165.0.51)
Metin çapraz kuvvet: katı
Metin boyutu: 36px (masaüstü), 32px (tablet), 25px (telefon)
Metin rengi: #4F4634
Yüksek çizgi metin: 1.1em
Metin Oryantasyonu: Orta
Yapıştırıcı metin modülünün tasarım sekmesine taşındı ve boyuttaki alt kategoriyi değiştirin:
Genişlik:% 31
Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #4F4634
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 3px
Mektup Mesafe Düğmesi: 4px
Yazı tipi düğmesi: ALEF
Yazı tipi ağırlığı: normal
Yazı tipi stili: büyük harf
Daha fazla mesafe, spasi modülü spasi alt kategorisinde aşağıdaki değişiklikleri yapın: Alt Marj: 200px
Üst Dolgu: 5 piksel Doğru dolgu: 20 piksel
Dolgu Alt: 5 piksel
Sol dolgu: 20px
Metin Modülü Başlık Ayarları Metin Bir sonraki bölümde, hizmetleriniz hakkında bilgi paylaşan metin modülüne odaklanacağız. Satırınızın ilk sütununa yeni bir metin modülü ekleyerek başlayın ve aşağıdaki metin ayarlarını uygulayın:
Metin Yazı Tipi: ALEF
Metin yazı tipi ağırlığı: kalınlık Metin yazı tipi stili: büyük harf
Metin Boyutu: 50 piksel
Metin rengi: #4F4634
Metin mektubu alanı: 5px
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Sol
Bir sonraki mesafe, tasarım sekmesini açın, aralık alt kategorisini açın ve sağ dolgulara ’50px’ ekleyin.
Son kenarlık ayarları, metin modülünüze aşağıdaki kenarlığı ekleyin:
Sağ sınır genişliği: 5px Sağ Sınır Rengi: #E9C1A5 Sağ Sınır Kuvvetleri: Çift
Gövde Metin Modülü Metin Ayarları Yeni oluşturduğunuz yeni bir metin modülü ekleyin. Tasarım sekmesini açın ve aşağıdaki metin ayarlarını uygulayın:
Metin Yazı Tipi: ALEF
Metin yazı tipi ağırlığı: normal Metin Boyutu: 15 piksel
Metin rengi: #4F4634
Metin mektubu alanı: 2px
Yüksek çizgi metin: 1.1em
Metin Oryantasyonu: Sol
Mesafe Tasarım sekmesine geçin ve sol dolguya ’80px’ ekleyin.
Son kenarlık ayarları, bu metin modülü için aşağıdaki sınır ayarlarını kullanın:
Sol sınır genişliği: 5px Sol sınır rengi: #e9c1a5 Sol sınır kuvveti: çift
4x klon metin modülü lütfen, metin modülünün ikinci klonu 4 kez ve üçüncü sütuna iki set yerleştirin, böylece hizmetinizin satırınıza eşit olarak bölünmesi. Metin Modülünü Değiştir 2 ve 4
Aralık Başlık Metin Modülü Modülünüz, yukarıdaki yazdırma ekranında işaretlenen metin modülünde bazı küçük ayarlamalar yapmalıdır. Her şeyden önce, başlık metin modülüne ’50px’ sol dolgu ekleyin ve sağ dolguyu silin. Metin modülü sınır ayarları daha sonra, sınır alt kategorisini açın ve soldaki sınır kuvveti ile sağ sınır stilini değiştirin.
Spasi içeriği metin modülü, gövde metin modülünü açarak sağ dolgulara ’80px’ ekleyerek devam eder ve sol dolguyu silin. Gövde metni modülü kenarlık ayarları ve bir kez daha sınır tarafınızı sağ tarafa değiştirin, bu durumda kalmaz. Metin Modülünü Değiştir 3 ve 4 Modül Metin Başlığı Yapılacak Son Şey için Marj Yalnızca masaüstünde aşağıdaki iki hizmete ‘350px’ için marj eklemektir. Tabletler ve cep telefonları için ‘0px’ kaydet. Sonuçlar yapıldı! Tüm ekran boyutlarında nihai sonuca bakalım. Masaüstünde Tablette Telefonda Bu yazıdaki son zihin, bir sonraki projeniz veya sahip olduğunuz gelecek projeniz için kullanabileceğiniz inanılmaz bir hizmet bölümünü yeniden oluşturmanıza yardımcı olduk. Size gerekli varsayılan Divi ayarlarını göstermenin yanı sıra, hizmet bölümünü ihtiyaçlarınıza göre değiştirmenize yardımcı olacak Photoshop resimlerini ve dosyalarını da paylaştık. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
Divi ile bir sonraki projeniz için çok görsel bir hizmet bölümü nasıl oluşturulur
YouTube kanalına abone Olgrasyon arka plan bölümünün hizmet bölümünü yeniden oluşturuyoruz, standart bölümü ekleyerek başlayın ve bunun için aşağıdaki gradyan arka planını kullanın:
Birinci renk: #f2f2f2
Renk İkinci: #ffffff
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Sütun yapısı satırını ayarlayın, parçanıza aşağıdaki sütun yapısına sahip satırlar ekleyin: Sütun 2 Arka Plan Görüntüsü, ikinci sütununuzun arka plan görüntüsü olarak ‘gradyan-square.png’ görüntü dosyasını ekleyerek devam edin. İndirdiğiniz klasörde bulunan Photoshop dosyasını açarak bu kutunun rengini her zaman değiştirebilirsiniz. Arka plan görüntüsü ile eşzamanlı olarak aşağıdaki ayarları kullanın: Sütun 2 Arka Plan Görüntü Boyutu: Gerçek Boyut
Sütun 2 Arka Plan Görüntü Pozisyonu: Alt Orta
Sütun Arka Planının Tekrarlanması Resim 2: Tekrar yok
Sütun 2 Karışık Arka Plan Görüntüsü: Normal
Yapıştırıcı daha sonra, boyut alt kategorisine devam edin ve aşağıdaki düzenlemeleri uygulayın: Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliğini kullanın: Yalebar Talang: 2
Resim Modülü Photoshop dosyasında kendi resminizi kullanın satır ayarlarını tamamladıktan sonra ikinci sütuna bir resim modülü ekleyebilirsiniz. İndirme klasöründe bulabileceğiniz ‘image.png’ görüntü dosyasını kullanabilirsiniz. Bu görüntüyü herhangi bir sınırsız kullanmakta özgürsünüz. Veya Photoshop dosyasını ‘Image-collate.psd’ dosyasını açabilir ve web sitenize uygun görüntüleri değiştirebilirsiniz.
Tasarım sekmesinde hizalayın, görüntü modülünüzün sayfanıza odaklanması için orta görüntü seviyesini kullanın. Geçerli metin ayarlarının altındaki metin modülü, eklediğiniz görüntünün hemen altına (aynı sütunda) metin modülünü ekleyin ve aşağıdaki metin ayarlarını kullanın:
Metin Yazı Tipi: Abril Fatface Metin yazı tipi ağırlığı: normal
Metin yazı tipi stili: çapraz
Renk Çapraz Metin: RGBA (233,193,165.0.51)
Metin çapraz kuvvet: katı
Metin boyutu: 36px (masaüstü), 32px (tablet), 25px (telefon)
Metin rengi: #4F4634
Yüksek çizgi metin: 1.1em
Metin Oryantasyonu: Orta
Yapıştırıcı metin modülünün tasarım sekmesine taşındı ve boyuttaki alt kategoriyi değiştirin:
Genişlik:% 31
Modül hizalaması: merkez
Hizalama düğmesi modülü, yeni oluşturduğunuz metin modülünün hemen altındadır, ayrıca düğme modülünü de ekleyin. Tasarım sekmesine geçin ve orta düğme seviyesini seçin.
Düğmeyi ayarlayın Ardından, düğme alt kategorisini açın ve aşağıdaki değişiklikleri uygulayın:
Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #4F4634
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 3px
Mektup Mesafe Düğmesi: 4px
Yazı tipi düğmesi: ALEF
Yazı tipi ağırlığı: normal
Yazı tipi stili: büyük harf
Daha fazla mesafe, spasi modülü spasi alt kategorisinde aşağıdaki değişiklikleri yapın: Alt Marj: 200px
Üst Dolgu: 5 piksel Doğru dolgu: 20 piksel
Dolgu Alt: 5 piksel
Sol dolgu: 20px
Metin Modülü Başlık Ayarları Metin Bir sonraki bölümde, hizmetleriniz hakkında bilgi paylaşan metin modülüne odaklanacağız. Satırınızın ilk sütununa yeni bir metin modülü ekleyerek başlayın ve aşağıdaki metin ayarlarını uygulayın:
Metin Yazı Tipi: ALEF
Metin yazı tipi ağırlığı: kalınlık Metin yazı tipi stili: büyük harf
Metin Boyutu: 50 piksel
Metin rengi: #4F4634
Metin mektubu alanı: 5px
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Sol
Bir sonraki mesafe, tasarım sekmesini açın, aralık alt kategorisini açın ve sağ dolgulara ’50px’ ekleyin.
Son kenarlık ayarları, metin modülünüze aşağıdaki kenarlığı ekleyin:
Sağ sınır genişliği: 5px Sağ Sınır Rengi: #E9C1A5 Sağ Sınır Kuvvetleri: Çift
Gövde Metin Modülü Metin Ayarları Yeni oluşturduğunuz yeni bir metin modülü ekleyin. Tasarım sekmesini açın ve aşağıdaki metin ayarlarını uygulayın:
Metin Yazı Tipi: ALEF
Metin yazı tipi ağırlığı: normal Metin Boyutu: 15 piksel
Metin rengi: #4F4634
Metin mektubu alanı: 2px
Yüksek çizgi metin: 1.1em
Metin Oryantasyonu: Sol
Mesafe Tasarım sekmesine geçin ve sol dolguya ’80px’ ekleyin.
Son kenarlık ayarları, bu metin modülü için aşağıdaki sınır ayarlarını kullanın:
Sol sınır genişliği: 5px Sol sınır rengi: #e9c1a5 Sol sınır kuvveti: çift
4x klon metin modülü lütfen, metin modülünün ikinci klonu 4 kez ve üçüncü sütuna iki set yerleştirin, böylece hizmetinizin satırınıza eşit olarak bölünmesi. Metin Modülünü Değiştir 2 ve 4
Aralık Başlık Metin Modülü Modülünüz, yukarıdaki yazdırma ekranında işaretlenen metin modülünde bazı küçük ayarlamalar yapmalıdır. Her şeyden önce, başlık metin modülüne ’50px’ sol dolgu ekleyin ve sağ dolguyu silin. Metin modülü sınır ayarları daha sonra, sınır alt kategorisini açın ve soldaki sınır kuvveti ile sağ sınır stilini değiştirin.
Spasi içeriği metin modülü, gövde metin modülünü açarak sağ dolgulara ’80px’ ekleyerek devam eder ve sol dolguyu silin. Gövde metni modülü kenarlık ayarları ve bir kez daha sınır tarafınızı sağ tarafa değiştirin, bu durumda kalmaz. Metin Modülünü Değiştir 3 ve 4 Modül Metin Başlığı Yapılacak Son Şey için Marj Yalnızca masaüstünde aşağıdaki iki hizmete ‘350px’ için marj eklemektir. Tabletler ve cep telefonları için ‘0px’ kaydet. Sonuçlar yapıldı! Tüm ekran boyutlarında nihai sonuca bakalım. Masaüstünde Tablette Telefonda Bu yazıdaki son zihin, bir sonraki projeniz veya sahip olduğunuz gelecek projeniz için kullanabileceğiniz inanılmaz bir hizmet bölümünü yeniden oluşturmanıza yardımcı olduk. Size gerekli varsayılan Divi ayarlarını göstermenin yanı sıra, hizmet bölümünü ihtiyaçlarınıza göre değiştirmenize yardımcı olacak Photoshop resimlerini ve dosyalarını da paylaştık. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
