Divi’de içerik için yüzen açı tasarımı nasıl yapılır
Yüzen açılı bir tasarım yapmak, özel bir kod olmadan düşünemeyeceğiniz Divi modülüne biraz yaratıcı bir stil eklemenin basit ve kolay bir yoludur. Ben iyiyim! Divi ile, Divi varsayılan seçeneğini kullanarak modülünüzün dört köşesini organize etmek için bölücü ve açıklamayı kullanabilirsiniz. Ve çeşitli olasılıkları denemek çok eğlenceli olabilir. Bu öğreticide, Divi’deki içeriğiniz için nasıl yüzer bir açılı tasarım oluşturacağınızı göstereceğim. Elementler var olduktan sonra, köşeleri sayısız şekil, simgeler ve renklerle düzenleyebilirsiniz!
Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticiden olası yüzer açılı tasarıma bir göz atın.
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!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Şimdi öğreticiye gidelim mi? Bu öğretici için ihtiyacınız olan tek şeyi başlatmak Divi. Bu örnekleri Divi Builder’ın ön ucunda başından beri oluşturacağız. Başlamak için yeni bir sayfa oluşturun ve sayfanızda bir başlık verin. Ön uçta Divi Builder’ı kullanmak için tıklayın ve “sıfırdan oluştur” seçeneğini seçin. Şimdi ayrılmaya hazırsın! Yüzen açılı tasarım düzeni şablonu oluşturmak, bu tasarımla sayısız tasarım olacağından, temel bir düzen (veya şablon) yapmak mantıklıdır. Bu şablon için, metin modülünün her köşesine dört böcek ekleyeceğiz. Daha sonra düzen kurulduktan sonra, ayırıcıyı benzersiz bir tasarım için ayarlamanın yeni yollarını keşfedebileceksiniz.
İlk olarak, bir satır sütun içeren yeni bir düzenli bölüm oluşturun.
Metin modülünü eklemeden önce, satır ayarlarını aşağıdaki gibi güncelleyin: Özel genişlik: 640px dolgu özel: 0px üst, 0px aşağıda Ardından metin modülünü aşağıdaki satıra ekleyin ve güncelleme: Metin Boyutu: 20px Metin Satır Yüksekliği: 1.8EM Özel Marj: -25px Top, -25px Alt, 25px Sol, 25px sağ dolgu özel (masaüstü):% 10 yukarıda,% 10,% 10 Daha düşük,% 10 sol,% 10 sağ özel dolgu (telefon):% 20 üst,% 20 alt sınır genişliği: 4px sınır rengi: #eeeeeemgin ve özel dolgu, hemen ekleyeceğimiz bölücü modülümüzü hizalamaya yardımcı olacaktır. Bölücü 50 piksel yüksekliğe ve genişliğe sahip olacağından, üst ve alt marj -25px, iyi bir simetrik tasarım için bölücü yarısını metin modülüne çekecektir (göreceksiniz). Metin modülü yerine iki üst yüzen açılı bölücü ekleyerek, bölücü modülünü kullanarak iki üst yüzeysel açı tasarımı eklemeye başlayabiliriz. Yeni bir bölücü modülü yapın ve metin modülünün üstüne sürükleyin. Ardından ve bölücü ayarlarını aşağıdaki gibi güncelleyin: Bölüsü Göster: Hayır
Arka Plan Rengi: #7CDA24 (veya istediğiniz renk) Yüksek: 50px genişlik: 50px 50 piksel yükseklik ve genişlik bize yüzen sınırlarımız için kullanabileceğimiz mükemmel bir kare verir. Şimdi, aşağıdaki gibi yüzen bir efekt oluşturmak için kutunun gölgesini bölücüye ekleyin: Gölge Kutusu: Ekrana bakın Dikey Konum Gölge Kutusu: 0px Bulanık Güç Gölge Kutusu: 0PX Gölgelerin Dağıtım Gücü Kutusu: 20px Gölge Renk: #ffffff Bölücü modülünün metin modülünün üzerinde kalmasını sağlamak için (arkasında gizli değil), ana öğeye CSS parçaları eklememiz gerekir: CSS Ana Eleman: Pozisyon: Göreli sonra Z index’ini 1’e güncelleyin.
Ayrıca, yinelenen bölücü modülü ve yinelenen bölücü ayarlarını aşağıdaki gibi güncelleyin: Modül hizalama: Doğru özel marj: -50px Bu hizalamayı sağa doğru doldurur ve üzerinde oturan bölücü modülünün tam yüksekliğine çeker. Bu, aradığımız doğru açılı yerleşimi yaratır. İki alt köşe böceğini eklemek için alt köşe bölücüyü ekleyin, çerçeve görüntü görüntüleme modunu kullanın ve metin modülünün altına yeni oluşturduğunuz ve yapıştırdığınız sol ve sağ böceğini kopyalayın (Sol bölücünün gösterildiği gibi yığılmış kaldığından emin olun. aşağıdaki resimde). İşte burada! Temel düzenimizin son tasarımına bakalım. Bu şablonla yeni bir yüzen köşenin tasarımını keşfederek, mümkün olan bazı tasarımları keşfedebiliriz. Tüm bu bölümleri Divi kütüphanesine saklayabilirsiniz, böylece gelecekte şablon olarak kaydedebilirsiniz. Ama şimdilik, bölümü iki katına çıkaralım ve yeni bir tasarımı keşfedelim.
Yinelenen şablonumuzla gradyan arka plana sahip elmas şekli, dört bölücü modülünü seçmek için çok seçici özelliği kullanın. Ardından, öğe ayar sermayesini uygulamak için seçilen böceklerden birine dişli simgesi ayarlarını tıklayın. Bu adım için tıklama modunu kullanmaya yardımcı olabilir. Elemanı ayarlarken, aşağıdakileri güncelleyin: Sol renk gradyan Arka Plan: #7CDA24 Sağ Renk Düzenimi Arka Plan: #EDF000 Gradyan Yönü: 45deg Ardından, bölücüyü elmas şekline dönüştürmek için Dönüşüm seçeneğini kullanın. Dönüşüm Ekseni Z: 45deg
İşte son tasarım. Eğimli bölücünüz, bölücüyü daha benzersiz bir tasarım için eğmek için Skew Dönüştürme seçeneğini de kullanabilir. Her bir bölücü için ayrı bir eğim tasarımı ekleyebilir veya dönüşümün eğimini aynı anda x ve y ekseninde -37 derece güncellemek için bir çoklu seçim kullanabilirsiniz. Koyu arka plan tasarımınız, benzersiz bir yüzer açılı tasarım için metin modülüne koyu bir arka plan rengi ekleyerek deneyebilir. Döndürme veya çarpık dönüşüm olmadan kullanan arka plan rengi #002130 olan bir metin modülü örneği. Yuvarlak kenar açıları Tasarıma birkaç yuvarlak açı yerleştirmek için, aşağıdaki sıralara yuvarlak bir açı ekleyebilirsiniz: Yuvarlak açı: 20px Daire Yüzen Açısı Kare açıyı bir daireye dönüştürmek için, bölücünün her ana elementine aşağıdaki özel CSS snippet’lerini ekleyebilirsiniz: Border-Radius:%50; Bölüm 50px kat 50 piksel ölçtüğü için, bu mükemmel bir daire tasarımı yaratacaktır. Gördüğünüz gibi, bu öğeleri sayısız yeni açı tasarımı için değiştirmenin birçok farklı yolu vardır. Şimdi, bölücü modülü yerine kayan bir açı için bir açıklama simgesi kullanarak keşfedelim. Bir bulanıklık simgesi ile yüzen bir açı yapmak, metin modülünün her köşesine bir bulanıklık simgesi ekler, size daha benzersiz bir tasarım verebilir. Öğreticinin başında yaptığımız düzen şablonunu kullanabilirsiniz. Tek fark, dört açı için bölücü modülünü değil bulanık modülünü kullanacaktır. Lütfen ve kullanılan parçanın düzen şablonunu kopyalayın. Ardından metin modülünün üstünde ve altındaki bölücü modülünü silin. İki üstü açıklama simgesi açısını ekleyerek yalnızca bir simge görüntülemek için bir açıklama modülü kullanmak istediğimiz için, emin olmalıyız ve doğru boyut ve alanı almalıyız. Açıklama modülünü metin modülünün üzerine ekleyin ve metnin başlığını ve içeriğini serbest bırakın. Ardından görüntü yerine simgeyi kullanmak için tıklayın ve Facebook Çemberi simgesini seçin. Ardından aşağıdaki açıklama ayarlarını güncelleyin (bu ayarlar, ilk örnekte bölücü modülüne eklediğimiz ayarlara çok benzer): #ffffff Yazı Tip Boyut Icon: 50px genişliğinde: 50px Özel Kenar: 0px Yuvarlak açının altında:% 50 Gölge Kutusu: Ekrana Bkz. Dikey Konum Gölge Kutusu: 0px Bulanık Güç Gölge Kutusu: 0PX Güç Yayılma Gölge Kutusu: 20px Renk Gölgesi: #FFFFFFFFF CSS Ana Element: Konum: Göreli; CSS Görüntü Koşu: Marj-Alt: 0px Dizin Z: 1 Ayrıca, diğerlerini geçerli açıklamanın hemen altında yapmak ve aşağıdakileri güncellemek için yinelenen modül açıklaması: Modül Hizalama: Doğru Özel Kenar: -50px Top Ardından üst iki modülü kopyalayın ve metin modülünün altına yapıştırın (sol açıklamanın doğru açıklamanın üstünde yığılmış kaldığından emin olun). Ardından, her açıklama için simgeyi istediğiniz her şeye güncelleyebilirsiniz. İşte son tasarım. Bu ayarla Blurb Corners simgesi ile daha fazla tasarım keşfedin birçok benzersiz tasarımı keşfedebilirsiniz. Simgeyi değiştirebilir, farklı bir renk kombinasyonu kullanabilir ve hatta bir dönüşüm seçeneği ile tarayabilir veya döndürebilirsiniz. İşte farklı metin ve simge renkleri için koyu bir arka plan rengi kullanan bir tasarım örneği.
Elemanları birleştirdiğiniz sürece birkaç sütun düzeninde çalışarak, bu yüzen açı düzenini birkaç sütun içine ekleyebilirsiniz. Divi’deki içeriğiniz için yüzen bir açılı tasarımı yaparak sarın Divi üreticilerinin gücünü gerçekten gösterir.Mevcut tüm doğuştan gelen seçeneklerle, bir temel düzen şablonundan sayısız tasarım varyasyonu yapabilirsiniz.Umarım bu, kendi yeni tasarımınızı keşfetmek için eğlenmenize ilham verir.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Şimdi öğreticiye gidelim mi? Bu öğretici için ihtiyacınız olan tek şeyi başlatmak Divi. Bu örnekleri Divi Builder’ın ön ucunda başından beri oluşturacağız. Başlamak için yeni bir sayfa oluşturun ve sayfanızda bir başlık verin. Ön uçta Divi Builder’ı kullanmak için tıklayın ve “sıfırdan oluştur” seçeneğini seçin. Şimdi ayrılmaya hazırsın! Yüzen açılı tasarım düzeni şablonu oluşturmak, bu tasarımla sayısız tasarım olacağından, temel bir düzen (veya şablon) yapmak mantıklıdır. Bu şablon için, metin modülünün her köşesine dört böcek ekleyeceğiz. Daha sonra düzen kurulduktan sonra, ayırıcıyı benzersiz bir tasarım için ayarlamanın yeni yollarını keşfedebileceksiniz.
İlk olarak, bir satır sütun içeren yeni bir düzenli bölüm oluşturun.
Metin modülünü eklemeden önce, satır ayarlarını aşağıdaki gibi güncelleyin: Özel genişlik: 640px dolgu özel: 0px üst, 0px aşağıda Ardından metin modülünü aşağıdaki satıra ekleyin ve güncelleme: Metin Boyutu: 20px Metin Satır Yüksekliği: 1.8EM Özel Marj: -25px Top, -25px Alt, 25px Sol, 25px sağ dolgu özel (masaüstü):% 10 yukarıda,% 10,% 10 Daha düşük,% 10 sol,% 10 sağ özel dolgu (telefon):% 20 üst,% 20 alt sınır genişliği: 4px sınır rengi: #eeeeeemgin ve özel dolgu, hemen ekleyeceğimiz bölücü modülümüzü hizalamaya yardımcı olacaktır. Bölücü 50 piksel yüksekliğe ve genişliğe sahip olacağından, üst ve alt marj -25px, iyi bir simetrik tasarım için bölücü yarısını metin modülüne çekecektir (göreceksiniz). Metin modülü yerine iki üst yüzen açılı bölücü ekleyerek, bölücü modülünü kullanarak iki üst yüzeysel açı tasarımı eklemeye başlayabiliriz. Yeni bir bölücü modülü yapın ve metin modülünün üstüne sürükleyin. Ardından ve bölücü ayarlarını aşağıdaki gibi güncelleyin: Bölüsü Göster: Hayır
Arka Plan Rengi: #7CDA24 (veya istediğiniz renk) Yüksek: 50px genişlik: 50px 50 piksel yükseklik ve genişlik bize yüzen sınırlarımız için kullanabileceğimiz mükemmel bir kare verir. Şimdi, aşağıdaki gibi yüzen bir efekt oluşturmak için kutunun gölgesini bölücüye ekleyin: Gölge Kutusu: Ekrana bakın Dikey Konum Gölge Kutusu: 0px Bulanık Güç Gölge Kutusu: 0PX Gölgelerin Dağıtım Gücü Kutusu: 20px Gölge Renk: #ffffff Bölücü modülünün metin modülünün üzerinde kalmasını sağlamak için (arkasında gizli değil), ana öğeye CSS parçaları eklememiz gerekir: CSS Ana Eleman: Pozisyon: Göreli sonra Z index’ini 1’e güncelleyin.
Ayrıca, yinelenen bölücü modülü ve yinelenen bölücü ayarlarını aşağıdaki gibi güncelleyin: Modül hizalama: Doğru özel marj: -50px Bu hizalamayı sağa doğru doldurur ve üzerinde oturan bölücü modülünün tam yüksekliğine çeker. Bu, aradığımız doğru açılı yerleşimi yaratır. İki alt köşe böceğini eklemek için alt köşe bölücüyü ekleyin, çerçeve görüntü görüntüleme modunu kullanın ve metin modülünün altına yeni oluşturduğunuz ve yapıştırdığınız sol ve sağ böceğini kopyalayın (Sol bölücünün gösterildiği gibi yığılmış kaldığından emin olun. aşağıdaki resimde). İşte burada! Temel düzenimizin son tasarımına bakalım. Bu şablonla yeni bir yüzen köşenin tasarımını keşfederek, mümkün olan bazı tasarımları keşfedebiliriz. Tüm bu bölümleri Divi kütüphanesine saklayabilirsiniz, böylece gelecekte şablon olarak kaydedebilirsiniz. Ama şimdilik, bölümü iki katına çıkaralım ve yeni bir tasarımı keşfedelim.
Yinelenen şablonumuzla gradyan arka plana sahip elmas şekli, dört bölücü modülünü seçmek için çok seçici özelliği kullanın. Ardından, öğe ayar sermayesini uygulamak için seçilen böceklerden birine dişli simgesi ayarlarını tıklayın. Bu adım için tıklama modunu kullanmaya yardımcı olabilir. Elemanı ayarlarken, aşağıdakileri güncelleyin: Sol renk gradyan Arka Plan: #7CDA24 Sağ Renk Düzenimi Arka Plan: #EDF000 Gradyan Yönü: 45deg Ardından, bölücüyü elmas şekline dönüştürmek için Dönüşüm seçeneğini kullanın. Dönüşüm Ekseni Z: 45deg
İşte son tasarım. Eğimli bölücünüz, bölücüyü daha benzersiz bir tasarım için eğmek için Skew Dönüştürme seçeneğini de kullanabilir. Her bir bölücü için ayrı bir eğim tasarımı ekleyebilir veya dönüşümün eğimini aynı anda x ve y ekseninde -37 derece güncellemek için bir çoklu seçim kullanabilirsiniz. Koyu arka plan tasarımınız, benzersiz bir yüzer açılı tasarım için metin modülüne koyu bir arka plan rengi ekleyerek deneyebilir. Döndürme veya çarpık dönüşüm olmadan kullanan arka plan rengi #002130 olan bir metin modülü örneği. Yuvarlak kenar açıları Tasarıma birkaç yuvarlak açı yerleştirmek için, aşağıdaki sıralara yuvarlak bir açı ekleyebilirsiniz: Yuvarlak açı: 20px Daire Yüzen Açısı Kare açıyı bir daireye dönüştürmek için, bölücünün her ana elementine aşağıdaki özel CSS snippet’lerini ekleyebilirsiniz: Border-Radius:%50; Bölüm 50px kat 50 piksel ölçtüğü için, bu mükemmel bir daire tasarımı yaratacaktır. Gördüğünüz gibi, bu öğeleri sayısız yeni açı tasarımı için değiştirmenin birçok farklı yolu vardır. Şimdi, bölücü modülü yerine kayan bir açı için bir açıklama simgesi kullanarak keşfedelim. Bir bulanıklık simgesi ile yüzen bir açı yapmak, metin modülünün her köşesine bir bulanıklık simgesi ekler, size daha benzersiz bir tasarım verebilir. Öğreticinin başında yaptığımız düzen şablonunu kullanabilirsiniz. Tek fark, dört açı için bölücü modülünü değil bulanık modülünü kullanacaktır. Lütfen ve kullanılan parçanın düzen şablonunu kopyalayın. Ardından metin modülünün üstünde ve altındaki bölücü modülünü silin. İki üstü açıklama simgesi açısını ekleyerek yalnızca bir simge görüntülemek için bir açıklama modülü kullanmak istediğimiz için, emin olmalıyız ve doğru boyut ve alanı almalıyız. Açıklama modülünü metin modülünün üzerine ekleyin ve metnin başlığını ve içeriğini serbest bırakın. Ardından görüntü yerine simgeyi kullanmak için tıklayın ve Facebook Çemberi simgesini seçin. Ardından aşağıdaki açıklama ayarlarını güncelleyin (bu ayarlar, ilk örnekte bölücü modülüne eklediğimiz ayarlara çok benzer): #ffffff Yazı Tip Boyut Icon: 50px genişliğinde: 50px Özel Kenar: 0px Yuvarlak açının altında:% 50 Gölge Kutusu: Ekrana Bkz. Dikey Konum Gölge Kutusu: 0px Bulanık Güç Gölge Kutusu: 0PX Güç Yayılma Gölge Kutusu: 20px Renk Gölgesi: #FFFFFFFFF CSS Ana Element: Konum: Göreli; CSS Görüntü Koşu: Marj-Alt: 0px Dizin Z: 1 Ayrıca, diğerlerini geçerli açıklamanın hemen altında yapmak ve aşağıdakileri güncellemek için yinelenen modül açıklaması: Modül Hizalama: Doğru Özel Kenar: -50px Top Ardından üst iki modülü kopyalayın ve metin modülünün altına yapıştırın (sol açıklamanın doğru açıklamanın üstünde yığılmış kaldığından emin olun). Ardından, her açıklama için simgeyi istediğiniz her şeye güncelleyebilirsiniz. İşte son tasarım. Bu ayarla Blurb Corners simgesi ile daha fazla tasarım keşfedin birçok benzersiz tasarımı keşfedebilirsiniz. Simgeyi değiştirebilir, farklı bir renk kombinasyonu kullanabilir ve hatta bir dönüşüm seçeneği ile tarayabilir veya döndürebilirsiniz. İşte farklı metin ve simge renkleri için koyu bir arka plan rengi kullanan bir tasarım örneği.
Elemanları birleştirdiğiniz sürece birkaç sütun düzeninde çalışarak, bu yüzen açı düzenini birkaç sütun içine ekleyebilirsiniz. Divi’deki içeriğiniz için yüzen bir açılı tasarımı yaparak sarın Divi üreticilerinin gücünü gerçekten gösterir.Mevcut tüm doğuştan gelen seçeneklerle, bir temel düzen şablonundan sayısız tasarım varyasyonu yapabilirsiniz.Umarım bu, kendi yeni tasarımınızı keşfetmek için eğlenmenize ilham verir.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
