Divi’deki bulanık simge arka planınızla nasıl yaratıcı olunur
Bulanık modül, Divi’de bulabileceğiniz en çok yönlü öğelerden bazılarıdır. Bu yazıda, nasıl daha ileri gideceğinizi ve bulanıklık simgesinin arka planıyla yaratıcı olacağınızı göstereceğiz. Harekete geçmek için modül açıklamaları, metin modülleri ve davet modüllerinin bir kombinasyonunu kullanacağız. Bu benzersiz tasarım, hizmet sayfaları ve ürün kategorisi sayfaları için mükemmeldir. JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Haydi Yapalım şunu. Önizleme Eğiticiye girmeden önce, çeşitli ekran boyutlarındaki üç örneğin sonuçlarına bakalım. Örnek 1 Masaüstü
Hücresel Örnek #2 masaüstü Hücresel Örnek #3 masaüstü Hücresel Ücretsiz Açıklama Simgesi Arka Plan Örneklerini İndirin Ücretsiz Açıklama simgesinin arka planının bir örneğini almak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.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 Divi Haftalık Düzen Paketine ücretsiz olarak erişin! Bu yaratıcı açıklamanın arka plan tasarımını yeniden oluşturmak için yeni bir arka plan bölümünü eklemek için YouTube kanalının genel adımlarımıza abone olun, yeni bir sayfa açın veya yeni bir sayfa açın veya Var olan sayfaya yeni bir bölüm ekleyin. Satır eklemeden önce arka plan rengini kendi tarafınıza ekleyin.
Arka plan rengi: #f7f7f7
Mesafe Bölüme de bazı özel üst ve alt rulmanlar ekleyin. Üst ve Alt Dolgu: 120px
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden önce yapıştırıcı, hattın boyutunu ayarlayın. Genişlik:% 100
Maksimum genişlik:% 100
Mesafe Ardından, dolguyu boşluk ayarlarında ayarlayın. Üst Dolgu: 8VW
Dolgu Alt: 15VW
Sol ve sağ dolgu: 12vw
Sütun 1 Satır ayarlarını değiştirmeyi bitirdikten sonra, ilk sütunda bazı değişiklikler yapın. İlk arka plan, beyaz bir arka plan ekleyin. Arka plan rengi: beyaz #ffffff
Daha sonra sınırlanan birkaç sınır yarıçapı ekleyin. Yuvarlak açı: 2vw dört açı
Son kutu gölgesi, kutunun gölgesini ekleyin. Kutular: İlk seçenek
Bulanık Güç Gölgesi Kutusu: 47px
Klon satırı iki kez modül eklemeye başlamadan önce son bir adım kaldı. Klonlama satırı iki kez. Bir örnek #1 yap Blurb Modülünü Sütun 1’e ekleyin Varsayılan içeriği silin Şimdi satır ve sütunlar hazırladıktan sonra, ilk satırdan sütun 1’e modül eklemeye başlayabiliriz. İlk olarak, açıklama modülünü ekleyin ve tüm varsayılan başlıkları ve içerik metnini silin. Bir simge seçin, bir resim değil simgeyi seçin. Ikon: bağlantı Arka Plan siyah arka plan rengini açıklama modülüne ekleyin.
Arka plan rengi: Siyah #000000 Simge ayarı sonra simge ayarlarını değiştirin.
Renk simgesi: sarı #EDF000 Simge Yerleştirme: Üst
Simge yazı tipi boyutu:
Masaüstü: 3VW
Tablet: 11vw
Telefon: 13VW
Yapıştırıcı modül boyutunu ayarlayarak devam edin.
İçerik Genişliği:% 100 Geniş:
Masaüstü: 11VW
Tablet: 19VW
Telefon: 22VW
Mesafe Bazı boşluk değerleri de ekleyin.
Üst kenar boşluğu: -5vw Alt kenar boşluğu: 0VW
Sol kenar boşluğu: -1vw
Üst dolgu ve alt dolgu: 4VW
Sınırlı benzersiz bir şekil simgesi vermek için, sol alt kısım hariç her açıya bir miktar sınır yarıçap ekleyin.
Yuvarlak açı: 50VW, 0vw sol alt köşede. Son kutu gölgesi, kutunun gölgesini ekleyin.
Kutular: İlk seçenek Bulanık Güç Gölgesi Kutusu: 50px
CSS özellikle simgeler, varsayılan olarak, alt kenar boşluklarının bazıları ona bağlıdır. Ondan kurtulmak için, CSS Kustom Blurb görüntü kutusuna bir satır CSS kodu ekleyeceğiz.
Bulanık görüntüler: marj dip: 0px; Marj-Alt: 0px;
Metin modülünü Sütun 1’e ekleyin H3 içeriği simgenin altına ekleyin, metin modülünü bazı H3 içeriğinizle ekleyin.
Arka Plan Arka plan ayarını açın ve gradyanın arka planını ekleyin. Arka plan: gradyan Renk Bir: Şeffaf
Renk İki: Sarı #EDF000
Gradyan yönü: 180 derece
İlk ve son pozisyon:% 74
Başlık metni sonra, metin stili H3.
Metin Başlığı Seviyesi Başlık: H3 Mektup H3: Josefin Sans
H3 Enalient: Merkez
H3 Mektup Renk: Siyah #OOOOOOO
Metin Boyutu H3:
Masaüstü: 2.4vw
Tablet: 3.4vw
Telefon: 4.8VW
Aralık harfi H3: 0EM
Boyut ayarlarında yapıştırıcı, tabletler ve cep telefonları için genişliği ayarlayın. Genişlik:
Tablet:% 50 Telefon:% 60
Uzay ayarlarını girip marj değerini ayarlayarak daha fazla mesafe.
Sol ve sağ kenar boşluğu: 5VW
Üst Dolgu: 1VW Son olarak değiştirin, dönüşüm seçeneğiyle modülü oynatın.
Çeviri Değiştir:
Eksen x: -20vw Y Ekseni: 13vw
Dönüşüm döndürme: İlk seçenek, 280 derece
Sütun 1’e hareket etmek için davet modülünü ekleyin Varsayılan başlık içeriğini silin, düğmeleri ekleyin ve 1 sütun 1’de ihtiyacımız olan bir sonraki ve son olarak metin içeriği harekete geçecek çağrı modülüdür. İstediğiniz bazı içerikleri ekleyin ve başlığın kopyalarını silin.
Bir bağlantı ekleyin, düğmeye alakalı bir bağlantı ekleyin.
Arka Plan Arka planın rengi olmadığından emin olun. Vücut metni daha sonra tasarım sekmesini açın ve içerik metin ayarlarını değiştirin. Vücut yazı tipi: Kızıl metin Vücut metninin hizalanması: sol Gövde metni rengi: koyu gri #666666
Vücut Metin Boyutu:
Masaüstü: 1.2vw
Tablet: 2.6vw
Telefon: 3.1vw
Vücut Hattı Yüksekliği: 1.8EM
Düğme düğmesini de değiştirin.
Metin Boyutu Düğmesi:
Masaüstü: 1VW Tablet: 2VW
Telefon: 3VW
Metin Renk Düğmesi: Çok Koyu Gri #3F3F3F
Düğme Sınır Rengi: Çok Koyu Gri #3F3F3F
Yazı tipi düğmesi: Josefin Sans
Marj Düğmesi: 3VW
Üst ve Alt Düğmeler Dolgu: 1VW
Sol ve sağ dolgu düğmeleri: 3VW
Biraz sol ve sağ dolgu ekleyerek mesafe tam modül ayarları.
Sol ve sağ dolgu: 7vw
İkinci sütunu silin ve sütun 1 klonu Sütun 2’deki ayarları ayarlayın, satır ayarlarına dönün ve ikinci sütunu silin. Kısa bir süre sonra, ilk sütun klonu. Bir sonraki adımda, kopya sütunundaki bazı ayarları ayarlayacağız. Bulanıklık modülü, simge modülünün rengini değiştirerek başlar.
Metin Modülü Gradyanın arka planını değiştirin ve bir sonraki metin modülünü kopyalayın. Arka plan rengi: aqua #00ffd4 İçeriği Değiştirin
Yeni bir örnek #2 yap Blurb Modülünü Sütun 1’e ekleyin Varsayılan içeriği ikinci örneğe silin! Açıklama modülünü sütun 1’e ekleyin ve tüm varsayılan içeriği silin.
Bir simge seçin, sonra bir simge seçin.
Arka plan şimdi, sarı arka plan rengini ekleyin. Arka plan rengi: sarı #EDF000 Tasarım sekmesindeki simge ayarlarını değiştirerek simgelere devam edin.
Simge yazı tipi boyutu: Masaüstü: 3VW
Tablet: 11vw
Telefon: 12VW
Renk ve arka plan düzenlendikten sonra yapıştırıcı, modülün boyutunu ayarlayın.
İçerik Genişliği:% 100
Mesafe ayrıca boşluk ayarlarını değiştirin.
Alt kenar boşluğu: 0VW Sol ve sağ kenar boşluğu: 3VW
Üst ve alt dolgu: 2VW Sınır Her bir sonraki açıya birkaç sınır yarıçapı ekleyin.
Yuvarlak açı: 2vw dört açı
Kutunun gölgesi, pürüzsüz bir kutu gölgesi ekleyerek modül tasarımını tamamlar.
Kutular: İlk seçenek Kutunun gölgesini ve arka plan renk sütunu 1’i kaldırın Bir sonraki sütun 1 ayarlarını açın ve arka plan rengini ve kutunun gölgesini silin.
Özel CSS, Gelişmiş sekmesine bir satır CSS kodu ekleyerek açıklama simgesine uygulanan varsayılan marjı silin. Bulanık görüntüler: marj dip: 0px;
Marj-Alt: 0px; Davet Modülünü Sütun 1’e hareket ettirmek için Ekleyin Açıklama modülünün altındaki başlık içeriğini, içerik içeriğini ve düğmeyi ekleyin, dava modülünü harekete geçirmek ve istediğiniz içerikten bazılarını girmek için ekleyin. Bir bağlantı ekleyin, bağlantıyı bir sonraki düğmeye ekleyin.
Beyaz arka plan ekleyerek arka plan devam ediyor. Arka plan rengi: Beyaz #ffffff
Tasarım sekmesinde başlık metni, H3 başlığının başlığına stil verin. Başlık Başlığı Seviyesi: H3 Mektup H3: Josefin Sans H3 harfinin rengi: gri çok karanlık #3f3f3f
H3 Boyutu: Masaüstü: 2VW
Tablet: 4VW
Telefon: 6VW
Hat yüksekliği H3: 2.3em
Vücut metni daha sonra, içerik metninin stili.
Vücut yazı tipi: Kızıl metin
Vücut metninin hizalanması: sol
Gövde metni rengi: koyu gri #666666
Vücut Metin Boyutu: Masaüstü: 1.1vw
Tablet: 2.2vw
Telefon: 3.1vw
Vücut Hattı Yüksekliği: 1.8EM
Düğme ve düğme stilini ayarlamak için düğmeyi aşağıdaki gibi taşıyın:
Metin Boyutu Düğmesi:
Masaüstü: 1VW
Tablet: 2VW
Telefon: 3VW Metin Renk Düğmesi: Çok Koyu Gri #3F3F3F
Yazı tipi düğmesi: Josefin Sans
Düğme Sınırı Genişliği: 2-X
Düğme Sınır Rengi: Çok Koyu Gri #3F3F3F
Üst ve Alt Marj Düğmeleri: 3VW
Üst ve Alt Düğmeler Dolgu: 1VW
Sol ve sağ dolgu düğmeleri: 3VW
Mesafe Şimdi, mesafeyi ayarlayın.
Alt marj: -1vw
Üst Dolgu: 6VW
Sol ve sağ dolgu: 7vw
Daha sonra, sınır düzenlemesindeki açıyı yuvarlayın. Yuvarlak açı: 2VW
Son kutu gölgesi, kutunun gölgesini ekleyin.
Kutular: İlk seçenek
Bulanık Güç Gölgesi Kutusu: 50px İkinci sütunu silin ve sütun 1 klonu Sütun 2’deki ayarları önceki örneğe benzer şekilde ayarlayın, satır ayarlarını açın ve ikinci sütunu silin. İlk sütunu iki katına çıkarın ve bazı ayarları ayarlayın.
Bulanık Modül Bulanıklık modülünün arka planını sarıdan aqua’ya değiştirin. Arka Plan Icon Rengi: Aqua #00ffd4
Davet modülü, davet modülünün içeriğini ve bağlantısını da değiştirecek şekilde harekete geçecek.
İçerik başlığını değiştir Bağlantıyı değiştir Bir örnek #3 yap
Blurb Modülünü Sütun 1’e ekleyin Varsayılan içeriği bir sonraki ve son örneğe silin! Açıklama modülünü sütun 1’e ekleyin ve varsayılan içeriği silin. Simgeyi seçin Bir simge seçin. Arka Plan Modüle parlak sarı arka plan ekleyin.
Arka Plan Rengi: Sarı #F7F426
Simgeler siyah simgeler yapar ve yerleşimlerini ayarlayın Renk simgesi: Siyah #000000 Simge Yerleştirme: Sol Simge yazı tipi boyutu: Masaüstü: 3VW
Tablet + Telefon: 8VW Yapıştırıcı, modülün genişliğini ve yüksekliğini değiştirerek devam edin.
İçerik Genişliği:% 100
Yüksek: 23VW
Bir sonraki mesafe, boşluk ayarlarını ayarlayın.
Sol kenar boşluğu: 3VW
Doğru marj: 25VW Üst Dolgu: 2VW
Sol dolgu: 1VW
Sınır birkaç sınır yarıçapı ekleyin. Yuvarlak açı: tüm açılarda 2VW
Kutunun gölgesi daha sonra, kutunun gölgesini ekleyin.
Kutular: İlk seçenek
Son değiştirin, özel bir dönüşüm çeviri değerini kullanarak modül konumunu değiştirin.
Eksen x: -6vw Y Ekseni: 1VW
Kutunun arka plan rengini ve gölgesini Sütun 1’den silin Sütun 1 ayarlarını açın ve kutunun arka plan rengini ve gölgesini silin. Sütun 1’e hareket etmek için davet modülünü ekleyin Açıklama modülünün altına başlık, içerik ve düğme içeriğini ekleyin, Davet Modülünü harekete geçirin. İstediğiniz bazı içerikleri ekleyin.
Bir bağlantı ekleyin, ardından düğmeye bağlantıyı ekleyin. Arka plan Davet modülünü düzenlemek için, siyah bir arka plan rengi ekleyerek başlayın.
Arka Plan Rengi: Siyah #oooooo
Başlık metni bir sonraki H3 metin ayarlarını ayarlar. Başlık Başlığı Seviyesi: H3 Mektup H3: Josefin Sans H3 harf rengi: parlak sarı #f7f426 Mektup Boyutu H3:
Masaüstü: 2VW Tablet: 4VW
Telefon: 6VW
Hat yüksekliği H3: 2.3em
Gövde metni ayrıca içerik metin ayarlarını değiştirir.
Body Font: Kızıl Metin Beden Metin Planlaması: Sol
Gövde metni rengi: Beyaz #000000
Vücut Metin Boyutu:
Masaüstü: 1.2vw
Tablet: 2.2vw Telefon: 3.1vw
Vücut Hattı Yüksekliği: 1.8EM
Sonra düğme, düğme stili aşağıdaki gibi.
Metin Boyutu Düğmesi:
Masaüstü: 1VW
Tablet: 2VW
Telefon: 3VW
Metin Renk Düğmesi: Aqua #00ffd4
Düğme Sınır Rengi: Aqua #00ffd4 Yazı tipi düğmesi: Josefin Sans
Üst ve Alt Marj Düğmeleri: 3VW
Üst ve Alt Düğmeler Dolgu: 1VW
Sol ve sağ dolgu düğmeleri: 3VW
Yapıştırıcı boyut ayarlarına geçer ve bazı değişiklikler yapar.
Genişlik:% 90
Modül hizalaması: merkez
Mesafe ayrıca boşluk ayarlarını değiştirin.
Üst kenar boşluğu: -9vw
Üst Dolgu: 5VW
Sol ve sağ dolgu: 7vw Bir sonraki sınır ayarlarını sınırlar ve her köşeye birkaç sınır yarıçapı ekleyin.
Yuvarlak açı: 2VW
Kutumuzun gölgesi de pürüzsüz bir kutu gölgesi kullanır. Kutu Gölgesi: İlk Seçenek
Son çeviriyi değiştirin, Dönüşüm Çeviri ayarlarını değiştirerek davet modülünün konumunu değiştirin.
Y ekseni: -18vw
İkinci sütunu silin ve sütun 1 klonu Sütun 2’deki ayarları ayarlayın Şimdi ilk sütun hazır, ikincisini sileceğiz ve birincisini çoğaltacağız. Bundan sonra, bazı içerik ayrıntılarını ve renklerini ayarlayacağız. Blurb Modülü Bulanık modülünü ayarlarken, arka planı sarıdan aqua’ya değiştirin.
Arka Plan Icon Rengi: Aqua #00ffd4 Davet modülü, davet modülünü harekete geçirecek, başlık içeriğini, başlığın başlığını ve düğmenin rengini ayarlamak için hareket eder. Düğme bağlantısını da değiştirmeyi ve bitirmeyi unutmayın!
Başlık Metin Rengi: Aqua #00ffd4 Doldurmak
Düğme rengi: #00ffd4 Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.Örnek 1 Masaüstü Hellular Örnek #2 masaüstü
Hücresel Örnek #3 masaüstü
Hücresel
Sonuç Bu yazıda görebileceğiniz gibi, bulanık simgenin arka planı bulanık tasarımınızı çok daha çekici hale getirebilir.Harekete geçme davetiyesi ve metin modülü ile eşleştirilen bir açıklama modülü kullanarak yaratıcı birçok olasılık vardır.Bu tasarım stili, hizmet sergileri veya ürün bölümleri için mükemmeldir.Ne düşünüyorsun?Bize yorumlarda söyleyin.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Divi Haftalık Düzen Paketine ücretsiz olarak erişin! Bu yaratıcı açıklamanın arka plan tasarımını yeniden oluşturmak için yeni bir arka plan bölümünü eklemek için YouTube kanalının genel adımlarımıza abone olun, yeni bir sayfa açın veya yeni bir sayfa açın veya Var olan sayfaya yeni bir bölüm ekleyin. Satır eklemeden önce arka plan rengini kendi tarafınıza ekleyin.
Arka plan rengi: #f7f7f7
Mesafe Bölüme de bazı özel üst ve alt rulmanlar ekleyin. Üst ve Alt Dolgu: 120px
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden önce yapıştırıcı, hattın boyutunu ayarlayın. Genişlik:% 100
Maksimum genişlik:% 100
Mesafe Ardından, dolguyu boşluk ayarlarında ayarlayın. Üst Dolgu: 8VW
Dolgu Alt: 15VW
Sol ve sağ dolgu: 12vw
Sütun 1 Satır ayarlarını değiştirmeyi bitirdikten sonra, ilk sütunda bazı değişiklikler yapın. İlk arka plan, beyaz bir arka plan ekleyin. Arka plan rengi: beyaz #ffffff
Daha sonra sınırlanan birkaç sınır yarıçapı ekleyin. Yuvarlak açı: 2vw dört açı
Son kutu gölgesi, kutunun gölgesini ekleyin. Kutular: İlk seçenek
Bulanık Güç Gölgesi Kutusu: 47px
Klon satırı iki kez modül eklemeye başlamadan önce son bir adım kaldı. Klonlama satırı iki kez. Bir örnek #1 yap Blurb Modülünü Sütun 1’e ekleyin Varsayılan içeriği silin Şimdi satır ve sütunlar hazırladıktan sonra, ilk satırdan sütun 1’e modül eklemeye başlayabiliriz. İlk olarak, açıklama modülünü ekleyin ve tüm varsayılan başlıkları ve içerik metnini silin. Bir simge seçin, bir resim değil simgeyi seçin. Ikon: bağlantı Arka Plan siyah arka plan rengini açıklama modülüne ekleyin.
Arka plan rengi: Siyah #000000 Simge ayarı sonra simge ayarlarını değiştirin.
Renk simgesi: sarı #EDF000 Simge Yerleştirme: Üst
Simge yazı tipi boyutu:
Masaüstü: 3VW
Tablet: 11vw
Telefon: 13VW
Yapıştırıcı modül boyutunu ayarlayarak devam edin.
İçerik Genişliği:% 100 Geniş:
Masaüstü: 11VW
Tablet: 19VW
Telefon: 22VW
Mesafe Bazı boşluk değerleri de ekleyin.
Üst kenar boşluğu: -5vw Alt kenar boşluğu: 0VW
Sol kenar boşluğu: -1vw
Üst dolgu ve alt dolgu: 4VW
Sınırlı benzersiz bir şekil simgesi vermek için, sol alt kısım hariç her açıya bir miktar sınır yarıçap ekleyin.
Yuvarlak açı: 50VW, 0vw sol alt köşede. Son kutu gölgesi, kutunun gölgesini ekleyin.
Kutular: İlk seçenek Bulanık Güç Gölgesi Kutusu: 50px
CSS özellikle simgeler, varsayılan olarak, alt kenar boşluklarının bazıları ona bağlıdır. Ondan kurtulmak için, CSS Kustom Blurb görüntü kutusuna bir satır CSS kodu ekleyeceğiz.
Bulanık görüntüler: marj dip: 0px; Marj-Alt: 0px;
Metin modülünü Sütun 1’e ekleyin H3 içeriği simgenin altına ekleyin, metin modülünü bazı H3 içeriğinizle ekleyin.
Arka Plan Arka plan ayarını açın ve gradyanın arka planını ekleyin. Arka plan: gradyan Renk Bir: Şeffaf
Renk İki: Sarı #EDF000
Gradyan yönü: 180 derece
İlk ve son pozisyon:% 74
Başlık metni sonra, metin stili H3.
Metin Başlığı Seviyesi Başlık: H3 Mektup H3: Josefin Sans
H3 Enalient: Merkez
H3 Mektup Renk: Siyah #OOOOOOO
Metin Boyutu H3:
Masaüstü: 2.4vw
Tablet: 3.4vw
Telefon: 4.8VW
Aralık harfi H3: 0EM
Boyut ayarlarında yapıştırıcı, tabletler ve cep telefonları için genişliği ayarlayın. Genişlik:
Tablet:% 50 Telefon:% 60
Uzay ayarlarını girip marj değerini ayarlayarak daha fazla mesafe.
Sol ve sağ kenar boşluğu: 5VW
Üst Dolgu: 1VW Son olarak değiştirin, dönüşüm seçeneğiyle modülü oynatın.
Çeviri Değiştir:
Eksen x: -20vw Y Ekseni: 13vw
Dönüşüm döndürme: İlk seçenek, 280 derece
Sütun 1’e hareket etmek için davet modülünü ekleyin Varsayılan başlık içeriğini silin, düğmeleri ekleyin ve 1 sütun 1’de ihtiyacımız olan bir sonraki ve son olarak metin içeriği harekete geçecek çağrı modülüdür. İstediğiniz bazı içerikleri ekleyin ve başlığın kopyalarını silin.
Bir bağlantı ekleyin, düğmeye alakalı bir bağlantı ekleyin.
Arka Plan Arka planın rengi olmadığından emin olun. Vücut metni daha sonra tasarım sekmesini açın ve içerik metin ayarlarını değiştirin. Vücut yazı tipi: Kızıl metin Vücut metninin hizalanması: sol Gövde metni rengi: koyu gri #666666
Vücut Metin Boyutu:
Masaüstü: 1.2vw
Tablet: 2.6vw
Telefon: 3.1vw
Vücut Hattı Yüksekliği: 1.8EM
Düğme düğmesini de değiştirin.
Metin Boyutu Düğmesi:
Masaüstü: 1VW Tablet: 2VW
Telefon: 3VW
Metin Renk Düğmesi: Çok Koyu Gri #3F3F3F
Düğme Sınır Rengi: Çok Koyu Gri #3F3F3F
Yazı tipi düğmesi: Josefin Sans
Marj Düğmesi: 3VW
Üst ve Alt Düğmeler Dolgu: 1VW
Sol ve sağ dolgu düğmeleri: 3VW
Biraz sol ve sağ dolgu ekleyerek mesafe tam modül ayarları.
Sol ve sağ dolgu: 7vw
İkinci sütunu silin ve sütun 1 klonu Sütun 2’deki ayarları ayarlayın, satır ayarlarına dönün ve ikinci sütunu silin. Kısa bir süre sonra, ilk sütun klonu. Bir sonraki adımda, kopya sütunundaki bazı ayarları ayarlayacağız. Bulanıklık modülü, simge modülünün rengini değiştirerek başlar.
Metin Modülü Gradyanın arka planını değiştirin ve bir sonraki metin modülünü kopyalayın. Arka plan rengi: aqua #00ffd4 İçeriği Değiştirin
Yeni bir örnek #2 yap Blurb Modülünü Sütun 1’e ekleyin Varsayılan içeriği ikinci örneğe silin! Açıklama modülünü sütun 1’e ekleyin ve tüm varsayılan içeriği silin.
Bir simge seçin, sonra bir simge seçin.
Arka plan şimdi, sarı arka plan rengini ekleyin. Arka plan rengi: sarı #EDF000 Tasarım sekmesindeki simge ayarlarını değiştirerek simgelere devam edin.
Renk simgesi: beyaz #ffffff
Simge Yerleştirme: ÜstSimge yazı tipi boyutu: Masaüstü: 3VW
Tablet: 11vw
Telefon: 12VW
Renk ve arka plan düzenlendikten sonra yapıştırıcı, modülün boyutunu ayarlayın.
İçerik Genişliği:% 100
Mesafe ayrıca boşluk ayarlarını değiştirin.
Alt kenar boşluğu: 0VW Sol ve sağ kenar boşluğu: 3VW
Üst ve alt dolgu: 2VW Sınır Her bir sonraki açıya birkaç sınır yarıçapı ekleyin.
Yuvarlak açı: 2vw dört açı
Kutunun gölgesi, pürüzsüz bir kutu gölgesi ekleyerek modül tasarımını tamamlar.
Kutular: İlk seçenek Kutunun gölgesini ve arka plan renk sütunu 1’i kaldırın Bir sonraki sütun 1 ayarlarını açın ve arka plan rengini ve kutunun gölgesini silin.
Özel CSS, Gelişmiş sekmesine bir satır CSS kodu ekleyerek açıklama simgesine uygulanan varsayılan marjı silin. Bulanık görüntüler: marj dip: 0px;
Marj-Alt: 0px; Davet Modülünü Sütun 1’e hareket ettirmek için Ekleyin Açıklama modülünün altındaki başlık içeriğini, içerik içeriğini ve düğmeyi ekleyin, dava modülünü harekete geçirmek ve istediğiniz içerikten bazılarını girmek için ekleyin. Bir bağlantı ekleyin, bağlantıyı bir sonraki düğmeye ekleyin.
Beyaz arka plan ekleyerek arka plan devam ediyor. Arka plan rengi: Beyaz #ffffff
Tasarım sekmesinde başlık metni, H3 başlığının başlığına stil verin. Başlık Başlığı Seviyesi: H3 Mektup H3: Josefin Sans H3 harfinin rengi: gri çok karanlık #3f3f3f
H3 Boyutu: Masaüstü: 2VW
Tablet: 4VW
Telefon: 6VW
Hat yüksekliği H3: 2.3em
Vücut metni daha sonra, içerik metninin stili.
Vücut yazı tipi: Kızıl metin
Vücut metninin hizalanması: sol
Gövde metni rengi: koyu gri #666666
Vücut Metin Boyutu: Masaüstü: 1.1vw
Tablet: 2.2vw
Telefon: 3.1vw
Vücut Hattı Yüksekliği: 1.8EM
Düğme ve düğme stilini ayarlamak için düğmeyi aşağıdaki gibi taşıyın:
Metin Boyutu Düğmesi:
Masaüstü: 1VW
Tablet: 2VW
Telefon: 3VW Metin Renk Düğmesi: Çok Koyu Gri #3F3F3F
Yazı tipi düğmesi: Josefin Sans
Düğme Sınırı Genişliği: 2-X
Düğme Sınır Rengi: Çok Koyu Gri #3F3F3F
Üst ve Alt Marj Düğmeleri: 3VW
Üst ve Alt Düğmeler Dolgu: 1VW
Sol ve sağ dolgu düğmeleri: 3VW
Mesafe Şimdi, mesafeyi ayarlayın.
Alt marj: -1vw
Üst Dolgu: 6VW
Sol ve sağ dolgu: 7vw
Daha sonra, sınır düzenlemesindeki açıyı yuvarlayın. Yuvarlak açı: 2VW
Son kutu gölgesi, kutunun gölgesini ekleyin.
Kutular: İlk seçenek
Bulanık Güç Gölgesi Kutusu: 50px İkinci sütunu silin ve sütun 1 klonu Sütun 2’deki ayarları önceki örneğe benzer şekilde ayarlayın, satır ayarlarını açın ve ikinci sütunu silin. İlk sütunu iki katına çıkarın ve bazı ayarları ayarlayın.
Bulanık Modül Bulanıklık modülünün arka planını sarıdan aqua’ya değiştirin. Arka Plan Icon Rengi: Aqua #00ffd4
Davet modülü, davet modülünün içeriğini ve bağlantısını da değiştirecek şekilde harekete geçecek.
İçerik başlığını değiştir Bağlantıyı değiştir Bir örnek #3 yap
Blurb Modülünü Sütun 1’e ekleyin Varsayılan içeriği bir sonraki ve son örneğe silin! Açıklama modülünü sütun 1’e ekleyin ve varsayılan içeriği silin. Simgeyi seçin Bir simge seçin. Arka Plan Modüle parlak sarı arka plan ekleyin.
Arka Plan Rengi: Sarı #F7F426
Simgeler siyah simgeler yapar ve yerleşimlerini ayarlayın Renk simgesi: Siyah #000000 Simge Yerleştirme: Sol Simge yazı tipi boyutu: Masaüstü: 3VW
Tablet + Telefon: 8VW Yapıştırıcı, modülün genişliğini ve yüksekliğini değiştirerek devam edin.
İçerik Genişliği:% 100
Yüksek: 23VW
Bir sonraki mesafe, boşluk ayarlarını ayarlayın.
Sol kenar boşluğu: 3VW
Doğru marj: 25VW Üst Dolgu: 2VW
Sol dolgu: 1VW
Sınır birkaç sınır yarıçapı ekleyin. Yuvarlak açı: tüm açılarda 2VW
Kutunun gölgesi daha sonra, kutunun gölgesini ekleyin.
Kutular: İlk seçenek
Son değiştirin, özel bir dönüşüm çeviri değerini kullanarak modül konumunu değiştirin.
Eksen x: -6vw Y Ekseni: 1VW
Kutunun arka plan rengini ve gölgesini Sütun 1’den silin Sütun 1 ayarlarını açın ve kutunun arka plan rengini ve gölgesini silin. Sütun 1’e hareket etmek için davet modülünü ekleyin Açıklama modülünün altına başlık, içerik ve düğme içeriğini ekleyin, Davet Modülünü harekete geçirin. İstediğiniz bazı içerikleri ekleyin.
Bir bağlantı ekleyin, ardından düğmeye bağlantıyı ekleyin. Arka plan Davet modülünü düzenlemek için, siyah bir arka plan rengi ekleyerek başlayın.
Arka Plan Rengi: Siyah #oooooo
Başlık metni bir sonraki H3 metin ayarlarını ayarlar. Başlık Başlığı Seviyesi: H3 Mektup H3: Josefin Sans H3 harf rengi: parlak sarı #f7f426 Mektup Boyutu H3:
Masaüstü: 2VW Tablet: 4VW
Telefon: 6VW
Hat yüksekliği H3: 2.3em
Gövde metni ayrıca içerik metin ayarlarını değiştirir.
Body Font: Kızıl Metin Beden Metin Planlaması: Sol
Gövde metni rengi: Beyaz #000000
Vücut Metin Boyutu:
Masaüstü: 1.2vw
Tablet: 2.2vw Telefon: 3.1vw
Vücut Hattı Yüksekliği: 1.8EM
Sonra düğme, düğme stili aşağıdaki gibi.
Metin Boyutu Düğmesi:
Masaüstü: 1VW
Tablet: 2VW
Telefon: 3VW
Metin Renk Düğmesi: Aqua #00ffd4
Düğme Sınır Rengi: Aqua #00ffd4 Yazı tipi düğmesi: Josefin Sans
Üst ve Alt Marj Düğmeleri: 3VW
Üst ve Alt Düğmeler Dolgu: 1VW
Sol ve sağ dolgu düğmeleri: 3VW
Yapıştırıcı boyut ayarlarına geçer ve bazı değişiklikler yapar.
Genişlik:% 90
Modül hizalaması: merkez
Mesafe ayrıca boşluk ayarlarını değiştirin.
Üst kenar boşluğu: -9vw
Üst Dolgu: 5VW
Sol ve sağ dolgu: 7vw Bir sonraki sınır ayarlarını sınırlar ve her köşeye birkaç sınır yarıçapı ekleyin.
Yuvarlak açı: 2VW
Kutumuzun gölgesi de pürüzsüz bir kutu gölgesi kullanır. Kutu Gölgesi: İlk Seçenek
Son çeviriyi değiştirin, Dönüşüm Çeviri ayarlarını değiştirerek davet modülünün konumunu değiştirin.
Y ekseni: -18vw
İkinci sütunu silin ve sütun 1 klonu Sütun 2’deki ayarları ayarlayın Şimdi ilk sütun hazır, ikincisini sileceğiz ve birincisini çoğaltacağız. Bundan sonra, bazı içerik ayrıntılarını ve renklerini ayarlayacağız. Blurb Modülü Bulanık modülünü ayarlarken, arka planı sarıdan aqua’ya değiştirin.
Arka Plan Icon Rengi: Aqua #00ffd4 Davet modülü, davet modülünü harekete geçirecek, başlık içeriğini, başlığın başlığını ve düğmenin rengini ayarlamak için hareket eder. Düğme bağlantısını da değiştirmeyi ve bitirmeyi unutmayın!
Başlık Metin Rengi: Aqua #00ffd4 Doldurmak
Düğme rengi: #00ffd4 Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.Örnek 1 Masaüstü Hellular Örnek #2 masaüstü
Hücresel Örnek #3 masaüstü
Hücresel
Sonuç Bu yazıda görebileceğiniz gibi, bulanık simgenin arka planı bulanık tasarımınızı çok daha çekici hale getirebilir.Harekete geçme davetiyesi ve metin modülü ile eşleştirilen bir açıklama modülü kullanarak yaratıcı birçok olasılık vardır.Bu tasarım stili, hizmet sergileri veya ürün bölümleri için mükemmeldir.Ne düşünüyorsun?Bize yorumlarda söyleyin.
