Üyelik teklifinizi Divi ile yaratıcı bir şekilde nasıl vurgulayabilirsiniz?
Web sitenizde üyelik teklifleri sunarsanız, insanların web sitenizde görmesini sağlamak önemlidir. Size bir başlangıç yapmak için, yalnızca Divi varsayılan seçeneğini kullanarak adım adım bir adım atabileceğiniz inanılmaz bir üyelik görünümü vereceğiz. Güzel bir parçanın arka planını, ziyaretçilerinizi doğru sayfaya getiren üyelik tekliflerini ve ayrı düğmeleri görüntüleyen bir bulanıklık modülü ile birleştiriyoruz. Önizleme Eğiticiye girmeden önce, farklı bir ekran boyutuna yeniden yapacağımız tasarımın bir gözü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.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketine erişin! Yeni bir sayfa oluşturarak veya mevcut sayfaları açarak ve görsel oluşturucuya geçerek gradyan arka plan başlatmanın yeni bir bölümünü ekleyin. Bunu yaptıktan sonra yeni bir parça ekleyin, ayarları açın ve aşağıdaki gradyan arka planını uygulayın:
Renk 1: RGBA (255,255,255.0)
Renk 2: #150A56
Gradyan Türü: Doğrusal
Gradyan yönü: 165 derece
Son pozisyon:% 36
Arka plan görüntüsü Bir sonraki arka plan görüntüsü sekmesini açın, indirilen klasörde bulabileceğiniz ‘home_office-39.jpg’ resmini yükleyin ve arka plan görüntüsünüzün bir karışımı olarak ‘Multom’ uygulayın. Yapacağımız bir sonraki şey için bölücü terimi parça bölücümümüzü eklemektir. İyi bir arka plan etkisi oluşturmak için üst ve alt böcekleri kullanacağız. Üst sekmeyi açarak ve aşağıdaki ayarları uygulayarak başlayın: Renk Renk: RGBA (30,35,96.0.75)
Böcek Yüksekliği: 700 piksel
Bölme Ayarları: Altını doldurun
Ardından, alt sekmeye geçin ve aşağıdaki değişiklikleri yapın: Bölme Stili: Listede bulun
Renk Renk: RGBA (2,0,35.0.93)
Böcek Yüksekliği: 430 piksel
Bölme Ayarları: Altını doldurun
Mesafemiz, aşağıdaki özel dolgunun üstünde ve altında ekstra boşluklar yapacaktır: Üst dolgu: 130px
Dolgu Alt: 65px
Sütun yapısının ilk satırını ekleyin Şimdi bizim tarafımızda istenen tüm değişiklikleri yaptık, ilk satırı eklemeye başlayabiliriz. İhtiyacımız olan sütun yapısı aşağıdaki gibidir: Yapıştırıcı Herhangi bir modül eklemeden önce, varsayılan satır ayarlarında küçük bir değişiklik yapacağız. Tasarım sekmesindeki boyut alt kategorisini açın ve ‘Bu satırı tam olarak yap’ seçeneğini etkinleştirin. Başlık metin modülünü sütun 2 metin ayarlarına ekleyin Şimdi modülümüzü eklemeye başlayabiliriz! Bu satırın sadece ikinci sütununu kullanacağız. Aşağıdaki metin ayarlarını içeren başlık metin modülünü ekleyin: Metin Yazı Tipi: Abeezee Metin Boyutu: 56px
Metin rengi: #f9f9f9
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Mesafemiz üstte de alana ihtiyaç duyacaktır. Bu yüzden üst kenar boşluğuna ’50px’ ekledik.
Açıklama metin modülünü önceki metin modülünün hemen altındaki sütun 2 metin ayarlarına ekleyin, devam edin ve açıklamanız için yeni bir tane ekleyin. İçeriğinizi ekledikten sonra aşağıdaki metin ayarlarını uygulayın: Metin Boyutu: 16px Metin Rengi:
Yüksek çizgi metin: 1.4em
Metin Oryantasyonu: Orta
Yapıştırıcımız ayrıca bu metin modülünün genişliğini ‘%70’ olarak değiştirecek ve orta modülün hizalamasını etkinleştirecektir.
CTA Metin Modülünü Sütun 2 Metin Ayarlarına Ekleyin Açıklama metin modülüyle bitirdikten sonra, devam edin ve CTA metin modülünü hemen altına ekleyin ve aşağıdaki metin ayarlarını uygulayın: Metin yazı tipi stili: büyük harf Metin rengi: #ffffff
Metin mektubu alanı: 5px
Metin Oryantasyonu: Orta
Ok görüntü modülünü Sütun 2’ye ekleyin Bu satıra eklememiz gereken son modül görüntüsünü yükleyin. İndirilen klasörde bulabileceğiniz ‘Arrow.png’ resmini yükleyin.
Yapıştırıcı bu görüntünün genişliğini bir sonraki ‘%13’e değiştirin. Mesafemiz bu okun CTA metin modülümüzle aynı yükseklikte görünmesini istiyor. Bu yüzden üst kenar boşluğuna ‘-100 piksel’ ekleyeceğiz. Son görünürlük, ekran boyutuna uymadığı için bu görüntü modülünü tabletlere ve cep telefonlarına devre dışı bırakacağız. Üyelik teklifi için sütun yapısının ikinci satırını ekleyin, aşağıdaki sütun yapısını kullanarak başka satırlar eklememiz gerekir: Satırların hizalanması Herhangi bir modül eklemeden önce sol çizgi hizalamasını uygulayacağız. Yapıştırıcı ve ayrıca boyut alt kategorisinde bazı değişiklikler yapacağız: Özel genişlik kullanın: evet Özel genişlik: 1030px Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Blurb Modülünü Sütun 2’ye Ekleyin Üyelik anlaşmalarını görüntülemek için metin ekleyin, düğme modülü ile birlikte bir bulanıklık modülü kullanacağız. Satırınızın ikinci sütununa bir bulanıklık modülü ekleyerek ve seçilen içerik ekleyerek başlayın.
Bir sonraki resmi yükleyin, indirme klasörünüzde bulabileceğiniz ‘konferans_illustration_05.png’ resmini yükleyin.
Arka plan rengi daha sonra, bulanıklık modülünüzün arka plan rengi olarak ‘#ffffff’ kullanın. Başlık Metin Ayarları Bir sonraki Blurb modülümüzde birkaç değişiklik yapmamız gerekiyor. Ağır yazı tipi başlığı: Ultra Kalın Yazı tipi stili başlığı: büyük harf Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: #485B90
Vücut metin ayarlarımız da içerik metin ayarlarını değiştirecektir:
Vücut metninin hizalanması: orta
Vücut Metin Boyutu: 11 piksel Vücut metni rengi: #485b90
Yapıştırıcılar, boyut alt kategorisini açarak devam eder ve aşağıdaki değişiklikleri yapar:
Görüntü Genişliği:% 50
İçerik genişliği: 250 piksel Genişlik:% 72 (masaüstü),% 50 (tablet),% 99 (cep telefonu) ‘% 50’ tabletini devralacak cep telefonları için ‘% 100’ kullanmıyoruz.
Blurb modülüne olan mesafe bu öğreticinin çok önemli bir parçasıdır. Blurb modülünü sola itmek ve önceki satırla örtüşmek için masaüstünde üst ve sol kenar boşluklarına olumsuz gideceğiz. Ayrıca, daha iyi görünen sonuçları yapmak için bazı özel dolgu ekleyeceğiz:
Üst kenar: -380px (masaüstü), 0px (tablet ve cep telefonu)
Sol kenar boşluğu: -180px (masaüstü),% 35 (tablet),% 20 (cep telefonu)
Üst dolgu: 30px Doğru dolgu: 10 piksel
Dolgu Alt: 30 piksel
Sol dolgu: 10 piksel
Bir sonraki sınır, sınır alt kategorisindeki her köşeye ’20px’ ekleyeceğiz.
Kutunun gölgesi ve tamamlamak için ilk kutu gölge seçeneğini etkinleştireceğiz.
Düğme modülünü, ikinci sütuna eklediğiniz bulanıklık modülünün hemen altındaki sütun 2 düğmesi ayarlarına ekleyin, düğme modülünü ekleyin. Düğmenize CTA ekledikten sonra aşağıdaki düğme ayarlarını uygulayın:
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 14px Metin Renk Düğmesi: #485B90 Arka plan renk düğmesi: #ffffff
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 10px
Mektup Ağırlığı: Çok kalın
Yazı tipi stili: büyük harf
Mesafe Blurb modülünü sola (masaüstünde) ittiğimiz için, düğme modülü için de aynısını yapmamız gerekir.
Üst kenar boşluğu: 20px
Alt kenar boşluğu: 50 piksel (tablet ve cep telefonu)
Sol kenar boşluğu: -100 piksel (masaüstü),% 53 (tablet),% 50 (cep telefonu) Sağ dolgu: 30px
Sol dolgu: 30px
Kutumuzun gölgesi, bu düğme modülüne de ilk kutu gölge seçeneğini ekleyecektir.
Sütun 2’deki klon bulanık ve düğme modülü ve sütun 3’e yerleştirin 3 Görüntü ve metni değiştirin, bulanıklık modülünü ve düğme modülünü ikinci sütununuzdan klonlayın ve her ikisini de üçüncü sütuna yerleştirin. Bu bulanıklık modülü için aynı görüntüyü ilk sütunda bulunan bulanıklık modülü için yaptığımız gibi kullanıyoruz. Arka plan rengini çıkarın ve gradyanın arka planını ekleyin İkinci modül ayarlarını tek tek silin, arka plan rengini silin ve aşağıdakileri ekleyin gradyan arka plan:
Renk 1: #6F9AF1
Renk 2: #485B90 Gradyan Türü: Doğrusal Gradyan yönü: 159deg İkinci Metin Renk Modülünü Değiştir Modülün ikinci metninin rengini ‘#ffffff’ olarak da değiştirin.
Bulanık modülün boşluğunu değiştirin, arınacağı, bulanık alt kategoriyi bulanık modülünüzden açın ve özel kenar boşluğunu değiştirin:
Üst: -470px (masaüstü), 0px (tablet ve cep telefonu)
Sol: -260px (masaüstü),% 35 (tablet),% 20 (cep telefonu)
Düğme modülü alanını değiştirin ve daha az önemli değil, özel marj modülü düğmesini de değiştirmemiz gerekiyor: Üst kenar boşluğu: 20px Sol kenar boşluğu: -180px (masaüstü),% 53 (tablet),% 50 (cep telefonu)
Önizleme Şimdi bu öğreticinin tüm adımlarından geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Masaüstünde
Tablette Hücresel olarak
Bu öğreticideki son zihin, üyelik teklifinizi bir bölümde yaratıcı bir şekilde nasıl vurgulayacağınızı gösterdik. Güzel renk paletlerini arka planın muhteşem bir kısmı ile birleştirdik ve bir üyelik penceresi oluşturmak için açıklama modülü ve düğme modülünü kullandık. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketine erişin! Yeni bir sayfa oluşturarak veya mevcut sayfaları açarak ve görsel oluşturucuya geçerek gradyan arka plan başlatmanın yeni bir bölümünü ekleyin. Bunu yaptıktan sonra yeni bir parça ekleyin, ayarları açın ve aşağıdaki gradyan arka planını uygulayın:
Renk 1: RGBA (255,255,255.0)
Renk 2: #150A56
Gradyan Türü: Doğrusal
Gradyan yönü: 165 derece
Son pozisyon:% 36
Arka plan görüntüsü Bir sonraki arka plan görüntüsü sekmesini açın, indirilen klasörde bulabileceğiniz ‘home_office-39.jpg’ resmini yükleyin ve arka plan görüntüsünüzün bir karışımı olarak ‘Multom’ uygulayın. Yapacağımız bir sonraki şey için bölücü terimi parça bölücümümüzü eklemektir. İyi bir arka plan etkisi oluşturmak için üst ve alt böcekleri kullanacağız. Üst sekmeyi açarak ve aşağıdaki ayarları uygulayarak başlayın: Renk Renk: RGBA (30,35,96.0.75)
Böcek Yüksekliği: 700 piksel
Bölme Ayarları: Altını doldurun
Ardından, alt sekmeye geçin ve aşağıdaki değişiklikleri yapın: Bölme Stili: Listede bulun
Renk Renk: RGBA (2,0,35.0.93)
Böcek Yüksekliği: 430 piksel
Bölme Ayarları: Altını doldurun
Mesafemiz, aşağıdaki özel dolgunun üstünde ve altında ekstra boşluklar yapacaktır: Üst dolgu: 130px
Dolgu Alt: 65px
Sütun yapısının ilk satırını ekleyin Şimdi bizim tarafımızda istenen tüm değişiklikleri yaptık, ilk satırı eklemeye başlayabiliriz. İhtiyacımız olan sütun yapısı aşağıdaki gibidir: Yapıştırıcı Herhangi bir modül eklemeden önce, varsayılan satır ayarlarında küçük bir değişiklik yapacağız. Tasarım sekmesindeki boyut alt kategorisini açın ve ‘Bu satırı tam olarak yap’ seçeneğini etkinleştirin. Başlık metin modülünü sütun 2 metin ayarlarına ekleyin Şimdi modülümüzü eklemeye başlayabiliriz! Bu satırın sadece ikinci sütununu kullanacağız. Aşağıdaki metin ayarlarını içeren başlık metin modülünü ekleyin: Metin Yazı Tipi: Abeezee Metin Boyutu: 56px
Metin rengi: #f9f9f9
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Mesafemiz üstte de alana ihtiyaç duyacaktır. Bu yüzden üst kenar boşluğuna ’50px’ ekledik.
Açıklama metin modülünü önceki metin modülünün hemen altındaki sütun 2 metin ayarlarına ekleyin, devam edin ve açıklamanız için yeni bir tane ekleyin. İçeriğinizi ekledikten sonra aşağıdaki metin ayarlarını uygulayın: Metin Boyutu: 16px Metin Rengi:
Yüksek çizgi metin: 1.4em
Metin Oryantasyonu: Orta
Yapıştırıcımız ayrıca bu metin modülünün genişliğini ‘%70’ olarak değiştirecek ve orta modülün hizalamasını etkinleştirecektir.
CTA Metin Modülünü Sütun 2 Metin Ayarlarına Ekleyin Açıklama metin modülüyle bitirdikten sonra, devam edin ve CTA metin modülünü hemen altına ekleyin ve aşağıdaki metin ayarlarını uygulayın: Metin yazı tipi stili: büyük harf Metin rengi: #ffffff
Metin mektubu alanı: 5px
Metin Oryantasyonu: Orta
Ok görüntü modülünü Sütun 2’ye ekleyin Bu satıra eklememiz gereken son modül görüntüsünü yükleyin. İndirilen klasörde bulabileceğiniz ‘Arrow.png’ resmini yükleyin.
Yapıştırıcı bu görüntünün genişliğini bir sonraki ‘%13’e değiştirin. Mesafemiz bu okun CTA metin modülümüzle aynı yükseklikte görünmesini istiyor. Bu yüzden üst kenar boşluğuna ‘-100 piksel’ ekleyeceğiz. Son görünürlük, ekran boyutuna uymadığı için bu görüntü modülünü tabletlere ve cep telefonlarına devre dışı bırakacağız. Üyelik teklifi için sütun yapısının ikinci satırını ekleyin, aşağıdaki sütun yapısını kullanarak başka satırlar eklememiz gerekir: Satırların hizalanması Herhangi bir modül eklemeden önce sol çizgi hizalamasını uygulayacağız. Yapıştırıcı ve ayrıca boyut alt kategorisinde bazı değişiklikler yapacağız: Özel genişlik kullanın: evet Özel genişlik: 1030px Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Blurb Modülünü Sütun 2’ye Ekleyin Üyelik anlaşmalarını görüntülemek için metin ekleyin, düğme modülü ile birlikte bir bulanıklık modülü kullanacağız. Satırınızın ikinci sütununa bir bulanıklık modülü ekleyerek ve seçilen içerik ekleyerek başlayın.
Bir sonraki resmi yükleyin, indirme klasörünüzde bulabileceğiniz ‘konferans_illustration_05.png’ resmini yükleyin.
Arka plan rengi daha sonra, bulanıklık modülünüzün arka plan rengi olarak ‘#ffffff’ kullanın. Başlık Metin Ayarları Bir sonraki Blurb modülümüzde birkaç değişiklik yapmamız gerekiyor. Ağır yazı tipi başlığı: Ultra Kalın Yazı tipi stili başlığı: büyük harf Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: #485B90
Vücut metin ayarlarımız da içerik metin ayarlarını değiştirecektir:
Vücut metninin hizalanması: orta
Vücut Metin Boyutu: 11 piksel Vücut metni rengi: #485b90
Yapıştırıcılar, boyut alt kategorisini açarak devam eder ve aşağıdaki değişiklikleri yapar:
Görüntü Genişliği:% 50
İçerik genişliği: 250 piksel Genişlik:% 72 (masaüstü),% 50 (tablet),% 99 (cep telefonu) ‘% 50’ tabletini devralacak cep telefonları için ‘% 100’ kullanmıyoruz.
Blurb modülüne olan mesafe bu öğreticinin çok önemli bir parçasıdır. Blurb modülünü sola itmek ve önceki satırla örtüşmek için masaüstünde üst ve sol kenar boşluklarına olumsuz gideceğiz. Ayrıca, daha iyi görünen sonuçları yapmak için bazı özel dolgu ekleyeceğiz:
Üst kenar: -380px (masaüstü), 0px (tablet ve cep telefonu)
Sol kenar boşluğu: -180px (masaüstü),% 35 (tablet),% 20 (cep telefonu)
Üst dolgu: 30px Doğru dolgu: 10 piksel
Dolgu Alt: 30 piksel
Sol dolgu: 10 piksel
Bir sonraki sınır, sınır alt kategorisindeki her köşeye ’20px’ ekleyeceğiz.
Kutunun gölgesi ve tamamlamak için ilk kutu gölge seçeneğini etkinleştireceğiz.
Düğme modülünü, ikinci sütuna eklediğiniz bulanıklık modülünün hemen altındaki sütun 2 düğmesi ayarlarına ekleyin, düğme modülünü ekleyin. Düğmenize CTA ekledikten sonra aşağıdaki düğme ayarlarını uygulayın:
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 14px Metin Renk Düğmesi: #485B90 Arka plan renk düğmesi: #ffffff
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 10px
Mektup Ağırlığı: Çok kalın
Yazı tipi stili: büyük harf
Mesafe Blurb modülünü sola (masaüstünde) ittiğimiz için, düğme modülü için de aynısını yapmamız gerekir.
Üst kenar boşluğu: 20px
Alt kenar boşluğu: 50 piksel (tablet ve cep telefonu)
Sol kenar boşluğu: -100 piksel (masaüstü),% 53 (tablet),% 50 (cep telefonu) Sağ dolgu: 30px
Sol dolgu: 30px
Kutumuzun gölgesi, bu düğme modülüne de ilk kutu gölge seçeneğini ekleyecektir.
Sütun 2’deki klon bulanık ve düğme modülü ve sütun 3’e yerleştirin 3 Görüntü ve metni değiştirin, bulanıklık modülünü ve düğme modülünü ikinci sütununuzdan klonlayın ve her ikisini de üçüncü sütuna yerleştirin. Bu bulanıklık modülü için aynı görüntüyü ilk sütunda bulunan bulanıklık modülü için yaptığımız gibi kullanıyoruz. Arka plan rengini çıkarın ve gradyanın arka planını ekleyin İkinci modül ayarlarını tek tek silin, arka plan rengini silin ve aşağıdakileri ekleyin gradyan arka plan:
Renk 1: #6F9AF1
Renk 2: #485B90 Gradyan Türü: Doğrusal Gradyan yönü: 159deg İkinci Metin Renk Modülünü Değiştir Modülün ikinci metninin rengini ‘#ffffff’ olarak da değiştirin.
Bulanık modülün boşluğunu değiştirin, arınacağı, bulanık alt kategoriyi bulanık modülünüzden açın ve özel kenar boşluğunu değiştirin:
Üst: -470px (masaüstü), 0px (tablet ve cep telefonu)
Sol: -260px (masaüstü),% 35 (tablet),% 20 (cep telefonu)
Düğme modülü alanını değiştirin ve daha az önemli değil, özel marj modülü düğmesini de değiştirmemiz gerekiyor: Üst kenar boşluğu: 20px Sol kenar boşluğu: -180px (masaüstü),% 53 (tablet),% 50 (cep telefonu)
Önizleme Şimdi bu öğreticinin tüm adımlarından geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Masaüstünde
Tablette Hücresel olarak
Bu öğreticideki son zihin, üyelik teklifinizi bir bölümde yaratıcı bir şekilde nasıl vurgulayacağınızı gösterdik. Güzel renk paletlerini arka planın muhteşem bir kısmı ile birleştirdik ve bir üyelik penceresi oluşturmak için açıklama modülü ve düğme modülünü kullandık. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
