Divi’de içerik için tasarım aksanı olarak bulanık simgeyi nasıl düzenlenir
Açıklama simgesini bir tasarım aksanı olarak kullanmak, daha önce hiç düşünmemiş olabileceğiniz bahçe düzeni benzersiz tasarımını sağlayabilir. Modül simgesi açıklamasını metin modülü ile örtüşmek için konumlandırmanın yanı sıra, simgeyi düzenlemek için metin modülünün arka planını ve sınırını kullanabilirsiniz. Bu, simginize gerçekten benzersiz bir tasarım verirken içeriği çerçeveleyen iyi bir tasarım aksanı yaratır. Bu öğreticide, Divi’deki içeriğiniz için bir tasarım aksanı olarak bulanık simgeyi nasıl düzenleyeceğinizi göstereceğim. Bölünelim! Sneak Peek İşte bu öğreticide yapacağımız tasarımların bazı örnekleri.
Bu öğretici için Düzen Örneklerini İndirin Ücretsiz Blurb Modül Accent Tasarım Düzeni 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 ÜCRETSİZ Haftalık Divi Düzen Paketine erişin! Başlangıçtan itibaren bir tasarım oluşturmaya başlayın, yeni bir sayfa oluşturun ve sayfanızda bir başlık verin. Ardından ön uçta bir divi üreticisi kullanın. Bir sütun satırı ile normal bölümü ekleyin. İlk modülünüzü eklemeden önce, satır ayarlarını aşağıdakilerle güncelleyin:
Özel Talang genişliği kullanın: Evet Özel Talang Genişliği: 1 Bu, modüller arasındaki özel kenar boşluklarını ortadan kaldıracaktır. Bir metin modülü oluşturun, ardından metin modülünü satıra ekleyin.
Metin modülünü aşağıdaki dolgu metniyle güncelleyin:
Metin Modülünü Düzenleme Artık kalan metin modülü ayarlarını aşağıdaki gibi güncelleyin: Arka Plan Rengi: #ffffff Başlık 2 Yazı Tipi: Nunito Başlık 2 yazı tipi ağırlığı: kalın
Başlık 2 yazı tipi stili: TT
Başlık 2 Renk Metni: #F24A5B
Başlık 2 Metin Boyutu: 42px (masaüstü), 32px (tablet), 22px (cep telefonu)
Başlık 2 harf aralığı [KAYDET: 16 PIX
Post 2 hat yüksekliği: 1.3em
Genişlik: 500 piksel (masaüstü), 490 piksel (tablet) Modül hizalaması: orta
Pilding Custom (masaüstü): 40px üst, 40px alt, 50px sol, 50px sağ
Pilding Custom (telefon): 20px sol, 20 piksel sağ
Sınır Genişliği: 10 piksel
Sınır rengi: #ffffff
Metin modülünü açıklama simgesiyle örtüşeceğimiz için, metin modülünün z-uzay sırasındaki simgenin üzerinde olduğundan emin olmalıyız. Bunu yapmak için önce CSS Box Ana Element Metin Modülüne aşağıdaki CSS parçalarını eklemeliyiz: Konum: Relative; Ardından 1 dizin değerini 1 olarak ayarlayın.
Şimdi bu metin modülü, tasarım için önemli olan diğer üst üste binen modüllerin üzerinde olacak. Bulanık simgeyi yapmak şimdi ilk bulanıklık simgesini yapmaya hazırız. Bunu yapmak için önce bir bulanıklık modülü eklemeliyiz ve metin modülünün üstüne sürüklemeliyiz. Ardından yapay içeriği (başlık metni ve içerik metni) silin ve açıklama için görüntü simgesini kullanmak için tıklayın. Ardından aşağıdaki tasarım ayarlarını güncelleyin:
Renk simgesi: #2ea3f2 Simge yazı tipi boyutu kullanın: evet
Ikon yazı tipi boyutu: 100px
Özel kenar: 0px taban (bu, modüller arasındaki varsayılan marjı ortadan kaldırır; Talang hattı genişliğini kullanırsanız gerekmez 1)
Ayrıca, modüllü herhangi bir metin kullanmadığımız için (yalnızca simgeler), açıklama simgesinin altındaki varsayılan marjı ortadan kaldırabiliriz. Bunu yapmak için, bulanık görüntü CSS kutusuna aşağıdaki özel CSS ekleyin:
CSS Görüntü Koşu: Marj-Alt: 0px
Bulanıklığı konumlandırmaya başlamadan önce bulanıklık simgesini çoğaltın, devam edelim ve bulanıklık modülünü çoğaltalım ve metin modülünün altına sürükleyin. Şimdi metin modülünün yukarıdaki ve altında açıklamanın bir simgesine sahip olmalısınız.
Dönüşüm X eksenini (cep telefonu) çevirin: -170px
Bu açıklama simgesini konumlandırmadan önce Blurb Icons #2 konumlandırma, biraz daha büyük yapalım. Bunu yapmak için, açıklama için modül ayarlarını açın ve yazı tipi simgesinin boyutunu 150 piksel olarak değiştirin. Ardından aşağıdaki Dönüşüm seçeneğini güncelleyerek açıklama simgesini konumlandırın: Dönüşüm X Eksenini (Masaüstü) Çevirme: 242px
Dönüşüm Y -ekseni (masaüstü) tercüme et: -100px Dönüşüm X eksenini (cep telefonu) çevirin: 190px
Bir sonraki sütunu yapmak için iki sütun satırı yapın, mevcut satırı çoğaltmak ve satır sütununun düzenini iki sütunun (1/2 1/2) düzenine dönüştürün.
Ardından, sol sütundaki üç modülü seçmek için çoklu seçici divi özelliğini kullanın, ardından kopyalayıp ikinci sütuna yapıştırın.
Ardından, birinci sütundaki alt açıklama simgesini silin. Sütun 2’deki bulanıklık simgesini hizalayın Sütun 2’deki bulanıklık simgesi için üst simgeyi sola ve alt simgeyi sağa kaydırmamız gerekir. Bunu sadece dönüşüm dönüşü dönüşüm değerini değiştirerek yapabiliriz. Sütun 2’deki Üst Açıklama Modülü için Modül Ayarları Açıklamasını Açın ve aşağıdakileri güncelleyin: Dönüşüm X eksenini (masaüstü) çevirin: 242px Dönüşüm X eksenini (cep telefonu) çevirin: 170px Temel olarak tek yaptığınız bu değerleri x ekseni boyunca ters yönde kaydırmak için bu değerleri negatiften pozitife değiştirmektir.
Ayrıca, sütun 2’deki daha düşük açıklama modülü için çevirme değerini aşağıdaki gibi güncelleyin:
Dönüşüm X eksenini çevirin (masaüstü): -242px
Dönüşüm X eksenini (cep telefonu) çevirin: -190px Metin modülünün metnini, içeriğin ikinci satırının ikinci satırındaki güncelleyin, üstün hizmetin bir parçası olarak hizmet eder. Bu nedenle, başlığımızdan farklı bir başlık yazı tipi boyutu ve daha küçük istiyoruz. İki metin modülü aynı anda güncellemek için, her iki metin modülünü de seçmek için Multi -Secect kullanın. Ardından aşağıdakileri güncelleyin: H2 başlık içeriğini “hizmet” olarak değiştirin. Başlık 2 Metin Boyutu: 28px (masaüstü), 22px (tablet), 18px (Cep telefonu)
Ayarları kaydedin. Şimdi sütun 2’deki metin modülü için düzenleyici sermayeyi açın ve aşağıdakileri güncelleyin:
Metin Oryantasyonu: Doğru Mevcut Düzen Boşluklarının Ayarlanması İki içerik hattı arasında çok fazla beyaz (veya negatif) boşluk olabilir. Bu alanın bir kısmını ortadan kaldırmak için, üst sıradaki alt açıklama modülüne aşağıdaki gibi daha düşük bir negatif marj ekleyebiliriz:
Özel marj: -100 piksel aşağıda Nihai sonuç şimdi sonucuna bakalım.
Düzeniniz için çeşitli simgeleri denemek için diğer simgeleri deneyin, bulgu ve değiştirme özelliklerini kullanabilirsiniz. Icon’unuzu içeren açıklamalardan biri için açıklama ayarlarını açın. Ardından, ayar sermayesindeki simgeyi sağlayın ve Bul ve Değiştir’i seçin. Popup Find & Change’da aşağıdakileri güncelleyin:
Bu bölümde : [Yeni bir simge seçin] Bundan sonra değiştir düğmesini tıklayın. Bu, sizin tarafınızdaki tüm açıklamaları yenisiyle değiştirecektir. İşte farklı simgeler kullanan bazı düzen örnekleri.
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! Başlangıçtan itibaren bir tasarım oluşturmaya başlayın, yeni bir sayfa oluşturun ve sayfanızda bir başlık verin. Ardından ön uçta bir divi üreticisi kullanın. Bir sütun satırı ile normal bölümü ekleyin. İlk modülünüzü eklemeden önce, satır ayarlarını aşağıdakilerle güncelleyin:
Özel Talang genişliği kullanın: Evet Özel Talang Genişliği: 1 Bu, modüller arasındaki özel kenar boşluklarını ortadan kaldıracaktır. Bir metin modülü oluşturun, ardından metin modülünü satıra ekleyin.
Metin modülünü aşağıdaki dolgu metniyle güncelleyin:
Hizmetlerimiz
İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın.Metin Modülünü Düzenleme Artık kalan metin modülü ayarlarını aşağıdaki gibi güncelleyin: Arka Plan Rengi: #ffffff Başlık 2 Yazı Tipi: Nunito Başlık 2 yazı tipi ağırlığı: kalın
Başlık 2 yazı tipi stili: TT
Başlık 2 Renk Metni: #F24A5B
Başlık 2 Metin Boyutu: 42px (masaüstü), 32px (tablet), 22px (cep telefonu)
Başlık 2 harf aralığı [KAYDET: 16 PIX
Post 2 hat yüksekliği: 1.3em
Genişlik: 500 piksel (masaüstü), 490 piksel (tablet) Modül hizalaması: orta
Pilding Custom (masaüstü): 40px üst, 40px alt, 50px sol, 50px sağ
Pilding Custom (telefon): 20px sol, 20 piksel sağ
Sınır Genişliği: 10 piksel
Sınır rengi: #ffffff
Metin modülünü açıklama simgesiyle örtüşeceğimiz için, metin modülünün z-uzay sırasındaki simgenin üzerinde olduğundan emin olmalıyız. Bunu yapmak için önce CSS Box Ana Element Metin Modülüne aşağıdaki CSS parçalarını eklemeliyiz: Konum: Relative; Ardından 1 dizin değerini 1 olarak ayarlayın.
Şimdi bu metin modülü, tasarım için önemli olan diğer üst üste binen modüllerin üzerinde olacak. Bulanık simgeyi yapmak şimdi ilk bulanıklık simgesini yapmaya hazırız. Bunu yapmak için önce bir bulanıklık modülü eklemeliyiz ve metin modülünün üstüne sürüklemeliyiz. Ardından yapay içeriği (başlık metni ve içerik metni) silin ve açıklama için görüntü simgesini kullanmak için tıklayın. Ardından aşağıdaki tasarım ayarlarını güncelleyin:
Renk simgesi: #2ea3f2 Simge yazı tipi boyutu kullanın: evet
Ikon yazı tipi boyutu: 100px
Özel kenar: 0px taban (bu, modüller arasındaki varsayılan marjı ortadan kaldırır; Talang hattı genişliğini kullanırsanız gerekmez 1)
Ayrıca, modüllü herhangi bir metin kullanmadığımız için (yalnızca simgeler), açıklama simgesinin altındaki varsayılan marjı ortadan kaldırabiliriz. Bunu yapmak için, bulanık görüntü CSS kutusuna aşağıdaki özel CSS ekleyin:
CSS Görüntü Koşu: Marj-Alt: 0px
Bulanıklığı konumlandırmaya başlamadan önce bulanıklık simgesini çoğaltın, devam edelim ve bulanıklık modülünü çoğaltalım ve metin modülünün altına sürükleyin. Şimdi metin modülünün yukarıdaki ve altında açıklamanın bir simgesine sahip olmalısınız.
Tercüman Dönüşümünü kullanarak Blurb Simgesini Konumlandırma Açıklama simgesini konumlandırmak için, açıklama modülünü sayfada istediğimiz yere simülüyle yerleştirmemizi sağlayan Divi Dönüşüm seçeneğini kullanacağız. Üst açıklama simgesini konumlandırmak için #1 numaralı bulanık simgeleri konumlandırma, aşağıdaki modül ayarlarını açıp aşağıdakileri güncellemek için:
Dönüşüm X eksenini çevirin (masaüstü): -242px Dönüşüm Y -eksenini (masaüstü) çevirin: 50pxDönüşüm X eksenini (cep telefonu) çevirin: -170px
Bu açıklama simgesini konumlandırmadan önce Blurb Icons #2 konumlandırma, biraz daha büyük yapalım. Bunu yapmak için, açıklama için modül ayarlarını açın ve yazı tipi simgesinin boyutunu 150 piksel olarak değiştirin. Ardından aşağıdaki Dönüşüm seçeneğini güncelleyerek açıklama simgesini konumlandırın: Dönüşüm X Eksenini (Masaüstü) Çevirme: 242px
Dönüşüm Y -ekseni (masaüstü) tercüme et: -100px Dönüşüm X eksenini (cep telefonu) çevirin: 190px
Bir sonraki sütunu yapmak için iki sütun satırı yapın, mevcut satırı çoğaltmak ve satır sütununun düzenini iki sütunun (1/2 1/2) düzenine dönüştürün.
Ardından, sol sütundaki üç modülü seçmek için çoklu seçici divi özelliğini kullanın, ardından kopyalayıp ikinci sütuna yapıştırın.
Ardından, birinci sütundaki alt açıklama simgesini silin. Sütun 2’deki bulanıklık simgesini hizalayın Sütun 2’deki bulanıklık simgesi için üst simgeyi sola ve alt simgeyi sağa kaydırmamız gerekir. Bunu sadece dönüşüm dönüşü dönüşüm değerini değiştirerek yapabiliriz. Sütun 2’deki Üst Açıklama Modülü için Modül Ayarları Açıklamasını Açın ve aşağıdakileri güncelleyin: Dönüşüm X eksenini (masaüstü) çevirin: 242px Dönüşüm X eksenini (cep telefonu) çevirin: 170px Temel olarak tek yaptığınız bu değerleri x ekseni boyunca ters yönde kaydırmak için bu değerleri negatiften pozitife değiştirmektir.
Ayrıca, sütun 2’deki daha düşük açıklama modülü için çevirme değerini aşağıdaki gibi güncelleyin:
Dönüşüm X eksenini çevirin (masaüstü): -242px
Dönüşüm X eksenini (cep telefonu) çevirin: -190px Metin modülünün metnini, içeriğin ikinci satırının ikinci satırındaki güncelleyin, üstün hizmetin bir parçası olarak hizmet eder. Bu nedenle, başlığımızdan farklı bir başlık yazı tipi boyutu ve daha küçük istiyoruz. İki metin modülü aynı anda güncellemek için, her iki metin modülünü de seçmek için Multi -Secect kullanın. Ardından aşağıdakileri güncelleyin: H2 başlık içeriğini “hizmet” olarak değiştirin. Başlık 2 Metin Boyutu: 28px (masaüstü), 22px (tablet), 18px (Cep telefonu)
Ayarları kaydedin. Şimdi sütun 2’deki metin modülü için düzenleyici sermayeyi açın ve aşağıdakileri güncelleyin:
Metin Oryantasyonu: Doğru Mevcut Düzen Boşluklarının Ayarlanması İki içerik hattı arasında çok fazla beyaz (veya negatif) boşluk olabilir. Bu alanın bir kısmını ortadan kaldırmak için, üst sıradaki alt açıklama modülüne aşağıdaki gibi daha düşük bir negatif marj ekleyebiliriz:
Özel marj: -100 piksel aşağıda Nihai sonuç şimdi sonucuna bakalım.
Düzeniniz için çeşitli simgeleri denemek için diğer simgeleri deneyin, bulgu ve değiştirme özelliklerini kullanabilirsiniz. Icon’unuzu içeren açıklamalardan biri için açıklama ayarlarını açın. Ardından, ayar sermayesindeki simgeyi sağlayın ve Bul ve Değiştir’i seçin. Popup Find & Change’da aşağıdakileri güncelleyin:
Bu bölümde : [Yeni bir simge seçin] Bundan sonra değiştir düğmesini tıklayın. Bu, sizin tarafınızdaki tüm açıklamaları yenisiyle değiştirecektir. İşte farklı simgeler kullanan bazı düzen örnekleri.
