Divi’de benzersiz bir bölücü arka plan tasarlamak için bir dönüşüm seçeneği nasıl kullanılır
Divi’nin varsayılan bölücü stili, sayfanıza yaratıcı arka plan tasarımları eklemenin her zaman popüler (ve basit) bir yolu olmuştur. Sadece sayfa içeriğini kırmak için hızlı ve güzel bir yol sağlamakla kalmaz, aynı zamanda web sitenizi ayırt etmek için soyut arka plan dokusu da ekleyebilir. Ve Divi Dönüşüm seçeneğinin piyasaya sürülmesiyle, o bölümün bölücüsü ile yapabileceğiniz daha harika şeyler var. Bu öğreticide, Divi’de benzersiz bir bölücü arka plan tasarlamak için bir dönüşüm seçeneğini nasıl kullanacağınızı göstereceğim. Başlayalım.
Aşağıdaki Sneak Peek, bu öğreticide yapabileceğiniz bir tasarım görüntüsüdür.
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 düzenini sayfanıza aktarmak için Haftalık Divi Düzen Paketine erişin!
Şimdi öğreticiye gidelim mi? Bu öğreticiye başlamaya başlamak için, ihtiyacınız olan tek şey divi ve içerik örneği olarak kullanılacak görüntüler temasıdır. Başından beri bir tasarım inşa edeceğiz. Tek yapmanız gereken yeni bir sayfa oluşturmak ve ön ucuna bir divi üreticisi uygulamaktır. O zaman ayrılmaya hazırsın. Bir bölücü ile soyut bir şekil arka planı yapın
Bu ilk örnek, içeriğiniz için bazı soyut form biçimleri yapmanın çok güzel bir yoludur. Temel olarak, bu, boş kısmı bölücü ile ayarlamayı ve bölücünün diğer içeriğin arkasındaki sayfanın herhangi bir yerine konumlandırılmasını içerir. İşte nasıl yapılacağı. İçerik bölümünü oluşturma Sayfamıza bölücü eklemeye başlamadan önce, önce bazı içerik örnekleri ekleyelim. İki sütunlu yeni bir düzenli bölüm oluşturun.
Metin modülünü ekleyin, ardından aşağıdaki yapay içerikle metin modülünü sütun 1’e ekleyin:
Ardından tasarımı aşağıdaki gibi güncelleyin:
Metin Boyutu: 16px Yüksek Satır: 1.9EM Başlık 2 Yazı Tipi: Roboto Başlık 2 Yazı Tipi Ağırlık: Işık Başlık 2 Metin Boyutu: 50px (masaüstü), 40px (tablet), 32px (cep telefonu) Post 2 Çizgi Yüksekliği: 1.4EM Modül Ekle Görüntü daha sonra görüntü modülünü sütun 2’ye ekleyin ve görüntülemek istediğiniz görüntüyü yükleyin. Bu örnekte, 800px kat 1156px olan düzen paketlerimizden birinden bir resim kullanıyorum.
Ardından görüntünün genişliğini ve seviyesini aşağıdaki gibi ayarlayın: Genişlik:% 80 (masaüstü),% 70 (tablet) Modül Hizalama: Sol Sütun 1’e dolgu ekleyin Metnimiz ve resmimizle birlikte, metin modülümüzü azaltmak için Sütun 1’e üst dolgu eklememiz gerekir. Aşağıdaki satır ayarlarını açın ve güncelleme: Sütun 1 Dolgu Özel (Masaüstü): 250px Üst Sütun 1 Özel Dolgu (Tablet): 50px üst Bu noktada üstünü bölücü ile ekleyin, ilk bölümümüzün tasarımını eklemeye hazırız. Bunu yapmak için yeni bir rol oynamalıyız. Bu yüzden devam edin ve yeni bir düzenli bölüm oluşturun (ihtiyacımız olmadığı için parçaya sütun eklemeyin) ve metnimizi ve resimlerimizi içeren parçanın üstüne sürükleyin.
Ardından, aşağıdakileri güncelleyerek şeffaf ve üst arka planı ve üst arka planı verin: Arka Plan Rengi: RGBA (0,0,0,0) Üst Bölü Kuvvetleri: Bkz. Ekran Catch Rengi: RGBA (120.168.193.0.45) Bölüsün Yüksekliği: 500 piksel (masaüstü), 400 piksel (tablet), 300 piksel (cep telefonu) Ardından, devam eden sekmeyi açın ve aşağıdaki parçanın üstünde kalmak için Z endeksi değerini 1 olarak ayarlayın. Daha sonra parçanın boyutunu ve mesafesini aşağıdaki gibi güncelleyin: Genişlik: 500 piksel (masaüstü), 400 piksel (tablet), 320 piksel (cep telefonu) Bölüm Tesviye: Orta Özel Kenar: -100px Özel Dolgu: 100px üst, 100 piksel aşağıda Bilin Genişlik, daha önce eklediğimiz bölen yüksekliğe eşittir (masaüstü için 500 piksel, tabletler için 400 piksel ve mobil için 320px). Bu bize kendi tarafımız için mükemmel bir kare tasarım verecektir. Tableti ve cep telefonunu ayarlamak için bölücünün genişliğini ve yüksekliğini küçültmek de önemlidir, çünkü bunu yapmazsanız, bölüm viewport tarayıcısındaki tasarıma veya taşmaya neden olur. Özel dolgu sadece bir yükseklik vermektir, böylece dönüşümün çeviri değerini daha sonra mümkün olduğunca ayarlamamız gerekmez. Artık bir bölüm tasarımımız olduğuna göre, bölümü istediğimiz her yerde konumlandırmak ve döndürmek için Dönüşüm seçeneğini kullanabiliriz. Aşağıdaki güncelleme: Dönüşüm Çeviri X Ekseni (Masaüstü):% -100 Dönüşüm Y -eksenini (masaüstü) çevirin:% 200 dönüşüm x -eksen (tablet) tercüme: -50% dönüşüm y -eksenini (masaüstü) çevirin: 100 % Dönüşüm ekseni Z: -45deg
Yatay bir bölücü yapın Divi Dönüşüm seçeneği ayrıca yatay bir bölücü tasarımı oluşturmak için bölme kısmını oynamamızı sağlar. Bu, sayfa içeriğiniz için benzersiz bir arka plan sağlayabilir. İşte nasıl yapılacağı. Mock içeriğine sahip yinelenen parçalar Bu örnek için, yukarıdaki ilk örnek için oluşturduğumuz içeriği kullanabiliriz. Lütfen sayfanın altını kopyalayıp yapıştırın. Bir sonraki içerik bölümünü güncelleyin, çoğaltılmış ve güncellenmiş parçalar için parçaların ayarlarını açın: Özel Dolgu (masaüstü): 80px üst, 80px alt özel dolgu (tablet): 0px üst Yatay bir bölücü yapmak için yatay bir bölücü yapın, önce içerik bölümünün hemen üzerinde yeni bir düzenli parça yapın. Ardından aşağıdakileri güncelleyin: Arka plan rengi: RGBA (0,0,0,0) Üst Bölü Kuvvet: Bkz. Ekran yakalama rengi Rengi Renk: RGBA (120,168,193,0.45) Yüksek Bölücü: 80VW Geri CarePer: Dikey olarak görebildiğimizden emin olmak için dikey Aşağıdaki parçanın üzerindeki bölücü, Z endeksini 1 olarak güncellememiz gerekir. Daha sonra genişlik ve özel mesafenin bir kısmını aşağıdaki gibi vermemiz gerekiyor: Genişlik: 800 piksel seviye alma bölümü: Sol Özel Kenar: -100 piksel Top Özel Dolgu: 100px üst, 100 piksel aşağıda Parçanın genişliği (800 piksel), yatay bir bölücü olarak işlev görecek şekilde döndükten sonra yüksek olacaktır. Bu nedenle, aşağıdaki bölümde sahip olduğunuz içerik miktarına bağlı olarak bu yüksekliği ayarlamanız gerekebilir. Şimdi dönüşüm seçeneğini kullanarak bölümü konumlandırmaya ve döndürmeye hazırız: Dönüşüm X eksenini çevirin: -50% dönüşüm Y eksenini çevirin:% 250 Dönüşüm ekseni Z: -90deg Buradaki nihai sonuç, tasarımın nihai sonucudur. Ve aynı düzeni kullanan farklı bölücü stillerinin bazı örnekleri. Wrap Web sitenize benzersiz tasarımlar ekleyeceğiniz hakkında her zaman daha fazla fikir için yer vardır. Divi dönüşüm seçeneği ve kolayca tasarlanan parçaları bölmesiyle, oldukça yaratıcı bazı şeyler yapabilirsiniz. Umarım, bu öğreticideki örnek, bir sonraki projenize yeni yeni turlar getirmek için parçaları bölen birkaç arka plan yapmanıza ilham verecektir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve düzenini sayfanıza aktarmak için Haftalık Divi Düzen Paketine erişin!
Şimdi öğreticiye gidelim mi? Bu öğreticiye başlamaya başlamak için, ihtiyacınız olan tek şey divi ve içerik örneği olarak kullanılacak görüntüler temasıdır. Başından beri bir tasarım inşa edeceğiz. Tek yapmanız gereken yeni bir sayfa oluşturmak ve ön ucuna bir divi üreticisi uygulamaktır. O zaman ayrılmaya hazırsın. Bir bölücü ile soyut bir şekil arka planı yapın
Bu ilk örnek, içeriğiniz için bazı soyut form biçimleri yapmanın çok güzel bir yoludur. Temel olarak, bu, boş kısmı bölücü ile ayarlamayı ve bölücünün diğer içeriğin arkasındaki sayfanın herhangi bir yerine konumlandırılmasını içerir. İşte nasıl yapılacağı. İçerik bölümünü oluşturma Sayfamıza bölücü eklemeye başlamadan önce, önce bazı içerik örnekleri ekleyelim. İki sütunlu yeni bir düzenli bölüm oluşturun.
Metin modülünü ekleyin, ardından aşağıdaki yapay içerikle metin modülünü sütun 1’e ekleyin:
Divi Meetups hakkında
İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Bu içeriğin her yönünü modül tasarım ayarlarında stilize edebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsinizArdından tasarımı aşağıdaki gibi güncelleyin:
Metin Boyutu: 16px Yüksek Satır: 1.9EM Başlık 2 Yazı Tipi: Roboto Başlık 2 Yazı Tipi Ağırlık: Işık Başlık 2 Metin Boyutu: 50px (masaüstü), 40px (tablet), 32px (cep telefonu) Post 2 Çizgi Yüksekliği: 1.4EM Modül Ekle Görüntü daha sonra görüntü modülünü sütun 2’ye ekleyin ve görüntülemek istediğiniz görüntüyü yükleyin. Bu örnekte, 800px kat 1156px olan düzen paketlerimizden birinden bir resim kullanıyorum.
Ardından görüntünün genişliğini ve seviyesini aşağıdaki gibi ayarlayın: Genişlik:% 80 (masaüstü),% 70 (tablet) Modül Hizalama: Sol Sütun 1’e dolgu ekleyin Metnimiz ve resmimizle birlikte, metin modülümüzü azaltmak için Sütun 1’e üst dolgu eklememiz gerekir. Aşağıdaki satır ayarlarını açın ve güncelleme: Sütun 1 Dolgu Özel (Masaüstü): 250px Üst Sütun 1 Özel Dolgu (Tablet): 50px üst Bu noktada üstünü bölücü ile ekleyin, ilk bölümümüzün tasarımını eklemeye hazırız. Bunu yapmak için yeni bir rol oynamalıyız. Bu yüzden devam edin ve yeni bir düzenli bölüm oluşturun (ihtiyacımız olmadığı için parçaya sütun eklemeyin) ve metnimizi ve resimlerimizi içeren parçanın üstüne sürükleyin.
Ardından, aşağıdakileri güncelleyerek şeffaf ve üst arka planı ve üst arka planı verin: Arka Plan Rengi: RGBA (0,0,0,0) Üst Bölü Kuvvetleri: Bkz. Ekran Catch Rengi: RGBA (120.168.193.0.45) Bölüsün Yüksekliği: 500 piksel (masaüstü), 400 piksel (tablet), 300 piksel (cep telefonu) Ardından, devam eden sekmeyi açın ve aşağıdaki parçanın üstünde kalmak için Z endeksi değerini 1 olarak ayarlayın. Daha sonra parçanın boyutunu ve mesafesini aşağıdaki gibi güncelleyin: Genişlik: 500 piksel (masaüstü), 400 piksel (tablet), 320 piksel (cep telefonu) Bölüm Tesviye: Orta Özel Kenar: -100px Özel Dolgu: 100px üst, 100 piksel aşağıda Bilin Genişlik, daha önce eklediğimiz bölen yüksekliğe eşittir (masaüstü için 500 piksel, tabletler için 400 piksel ve mobil için 320px). Bu bize kendi tarafımız için mükemmel bir kare tasarım verecektir. Tableti ve cep telefonunu ayarlamak için bölücünün genişliğini ve yüksekliğini küçültmek de önemlidir, çünkü bunu yapmazsanız, bölüm viewport tarayıcısındaki tasarıma veya taşmaya neden olur. Özel dolgu sadece bir yükseklik vermektir, böylece dönüşümün çeviri değerini daha sonra mümkün olduğunca ayarlamamız gerekmez. Artık bir bölüm tasarımımız olduğuna göre, bölümü istediğimiz her yerde konumlandırmak ve döndürmek için Dönüşüm seçeneğini kullanabiliriz. Aşağıdaki güncelleme: Dönüşüm Çeviri X Ekseni (Masaüstü):% -100 Dönüşüm Y -eksenini (masaüstü) çevirin:% 200 dönüşüm x -eksen (tablet) tercüme: -50% dönüşüm y -eksenini (masaüstü) çevirin: 100 % Dönüşüm ekseni Z: -45deg
Sayfaya bir bölücü tasarımı daha ekleyeceğiz. Ancak tasarımı başlatmak için, çerçeve görüntü görüntüleme modunu kullanın ve üst üste (bölücü kuvveti ile) ve metin ve görüntüyü içeren parçanın altına yapıştırın.
Bölümün ayarlarını güncelleyin ve ardından özel marjı aşağıdaki gibi güncelleyin: Özel kenar boşluğu: -100 piksel aşağıda
Yatay bir bölücü yapın Divi Dönüşüm seçeneği ayrıca yatay bir bölücü tasarımı oluşturmak için bölme kısmını oynamamızı sağlar. Bu, sayfa içeriğiniz için benzersiz bir arka plan sağlayabilir. İşte nasıl yapılacağı. Mock içeriğine sahip yinelenen parçalar Bu örnek için, yukarıdaki ilk örnek için oluşturduğumuz içeriği kullanabiliriz. Lütfen sayfanın altını kopyalayıp yapıştırın. Bir sonraki içerik bölümünü güncelleyin, çoğaltılmış ve güncellenmiş parçalar için parçaların ayarlarını açın: Özel Dolgu (masaüstü): 80px üst, 80px alt özel dolgu (tablet): 0px üst Yatay bir bölücü yapmak için yatay bir bölücü yapın, önce içerik bölümünün hemen üzerinde yeni bir düzenli parça yapın. Ardından aşağıdakileri güncelleyin: Arka plan rengi: RGBA (0,0,0,0) Üst Bölü Kuvvet: Bkz. Ekran yakalama rengi Rengi Renk: RGBA (120,168,193,0.45) Yüksek Bölücü: 80VW Geri CarePer: Dikey olarak görebildiğimizden emin olmak için dikey Aşağıdaki parçanın üzerindeki bölücü, Z endeksini 1 olarak güncellememiz gerekir. Daha sonra genişlik ve özel mesafenin bir kısmını aşağıdaki gibi vermemiz gerekiyor: Genişlik: 800 piksel seviye alma bölümü: Sol Özel Kenar: -100 piksel Top Özel Dolgu: 100px üst, 100 piksel aşağıda Parçanın genişliği (800 piksel), yatay bir bölücü olarak işlev görecek şekilde döndükten sonra yüksek olacaktır. Bu nedenle, aşağıdaki bölümde sahip olduğunuz içerik miktarına bağlı olarak bu yüksekliği ayarlamanız gerekebilir. Şimdi dönüşüm seçeneğini kullanarak bölümü konumlandırmaya ve döndürmeye hazırız: Dönüşüm X eksenini çevirin: -50% dönüşüm Y eksenini çevirin:% 250 Dönüşüm ekseni Z: -90deg Buradaki nihai sonuç, tasarımın nihai sonucudur. Ve aynı düzeni kullanan farklı bölücü stillerinin bazı örnekleri. Wrap Web sitenize benzersiz tasarımlar ekleyeceğiniz hakkında her zaman daha fazla fikir için yer vardır. Divi dönüşüm seçeneği ve kolayca tasarlanan parçaları bölmesiyle, oldukça yaratıcı bazı şeyler yapabilirsiniz. Umarım, bu öğreticideki örnek, bir sonraki projenize yeni yeni turlar getirmek için parçaları bölen birkaç arka plan yapmanıza ilham verecektir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
