Divi'de Benzersiz Bölüm Bölücü Arka Planları Tasarlamak için Dönüştürme Seçenekleri Nasıl Kullanılır

Divi'nin yerleşik bölüm ayırıcı stilleri, sayfalarınıza yaratıcı arka plan tasarımları eklemenin her zaman popüler (ve basit) bir yolu olmuştur. Sayfa içeriğini bölmek için hızlı ve güzel bir yol sağlamakla kalmaz, aynı zamanda web sitenizi farklı kılmak için soyut bir arka plan dokusu da ekleyebilir. Divi'nin dönüştürme seçeneklerinin piyasaya sürülmesiyle, bu bölüm ayırıcılarla yapabileceğiniz daha da harika şeyler var.

Bu eğitimde, Divi'de benzersiz bölüm ayırıcı arka planları tasarlamak için dönüştürme seçeneklerini nasıl kullanacağınızı göstereceğim.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturabileceğiniz tasarımlara bir göz atın.

Bölüm Bölücü Arka Plan Örnekleri Düzenini ÜCRETSİZ olarak indirin

Ellerinizi bu örnek bölüm ayırıcı arka planlarına koymak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Şimdi öğreticiye geçelim mi?

Başlarken

Bu öğreticiye başlamak için tek ihtiyacınız olan Divi Teması ve örnek içerik için kullanılacak bir resimdir. Tasarımı sıfırdan inşa edeceğiz. Tek yapmanız gereken yeni bir sayfa oluşturmak ve Divi oluşturucuyu ön uçta dağıtmak. O zaman gitmeye hazırsın.

Bölüm Bölücülerle Soyut Şekil Arka Planları Oluşturma

Bu ilk örnek, içeriğiniz için bazı soyut şekil arka planları oluşturmanın gerçekten harika bir yoludur. Temel olarak, bu, boş bir bölümü bir ayırıcıyla özelleştirmeyi ve bu bölüm ayırıcıyı sayfanın herhangi bir yerinde diğer içeriğin arkasına yerleştirmeyi içerir.

İşte nasıl yapılacağı.

İçerik Bölümünü Oluşturma

Sayfamıza bölüm ayırıcılarımızı eklemeye başlamadan önce, ilk olarak bazı örnek içerikler ekleyelim. İki sütunlu bir satırla yeni bir normal bölüm oluşturun.

Metin Modülünü Ekleyin

Ardından, aşağıdaki sahte içerikle sütun 1'e bir metin modülü ekleyin:

<h2>About Divi Meetups</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings</p>

Ardından tasarımı aşağıdaki gibi güncelleyin:

Metin Metin Boyutu: 16px
Metin Satır Yüksekliği: 1.9em
Başlık 2 Yazı Tipi: Roboto
Başlık 2 Yazı Tipi Ağırlığı: Hafif
Başlık 2 Metin Boyutu: 50px (masaüstü), 40px (tablet), 32px (telefon)
Başlık 2 Çizgi Yüksekliği: 1.4em

Görüntü Modülünü Ekleyin

Ardından 2. sütuna bir resim modülü ekleyin ve görüntülemek istediğiniz resmi yükleyin. Bu örnekte, yerleşim paketlerimizden birinden 800 piksele 1156 piksel olan bir resim kullanıyorum.

Ardından görüntünün genişliğini ve hizalamasını aşağıdaki gibi ayarlayın:

Genişlik: %80 (masaüstü), %70 (tablet)
Modül Hizalama: Sol

Sütun 1'e Dolgu Ekle

Metnimiz ve resmimiz yerindeyken, metin modülümüzü aşağı çekmek için 1. sütuna bir miktar üst dolgu eklememiz gerekiyor. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Sütun 1 Özel Dolgu (masaüstü): 250 piksel üst
Sütun 1 Özel Dolgu (tablet): 50 piksel üst

Bölüm Bölücü ile Üst Bölüm Ekleme

Bu noktada ilk bölme bölücü tasarımımızı eklemeye hazırız. Bunun için yeni bir bölüm oluşturmamız gerekiyor. Öyleyse devam edin ve yeni bir normal bölüm oluşturun (bu bölüme bir sütun eklemeyin çünkü buna ihtiyacımız olmayacak) ve onu metnimizi ve resmimizi içeren bölümün üzerine sürükleyin.

Ardından, aşağıdakileri güncelleyerek bölümü ve şeffaf arka planı ve bir üst ayırıcıyı verin:

Arka Plan Rengi: rgba(0,0,0,0)
Üst Bölücü Stili: ekran görüntüsüne bakın
Bölücü Rengi: rgba(120,168,193,0.45)
Bölücü Yüksekliği: 500px (masaüstü), 400px (tablet), 300px (telefon)

Ardından, gelişmiş sekmesine gidin ve Z İndeksi değerini 1'e ayarlayın, böylece altındaki bölümün üzerinde kalacak.

Ardından bölümün boyutunu ve aralığını aşağıdaki gibi güncelleyin:

Genişlik: 500 piksel (masaüstü), 400 piksel (tablet), 320 piksel (telefon)
Bölüm Hizalama: Merkez
Özel Kenar Boşluğu: -100 piksel
Özel Dolgu: 100 piksel üst, 100 piksel alt

Genişliğin, daha önce eklediğimiz ayırıcının yüksekliğine eşit olduğunu unutmayın (masaüstü için 500 piksel, tablet için 400 piksel ve telefon için 320 piksel). Bu bize bölüm bölücümüz için mükemmel bir kare tasarım verecektir. Tablet ve telefon için ayarlamak için genişliği ve bölücü yüksekliğini küçültmek de önemlidir, çünkü bunu yapmazsanız, bölüm eğilir ve tasarımı bozar veya tarayıcı görünüm alanında taşmaya neden olur.

Özel dolgu sadece bölüme biraz yükseklik vermek içindir, böylece daha sonra dönüşüm çevirme değerlerini ayarlamak zorunda kalmayacağız.

Artık bölüm tasarımımızı yerine getirdiğimize göre, bölüm ayırıcıyı sayfada istediğimiz yere konumlandırmak ve döndürmek için dönüştürme seçeneklerini kullanabiliriz.

Aşağıdakileri güncelleyin:

Dönüştür X eksenini çevir (masaüstü): -%100
Dönüştür Y eksenini çevir (masaüstü): %200

Dönüştür X eksenini çevir (tablet): -%50
Dönüştür Y eksenini çevir (masaüstü): %100

Dönüştür Z eksenini döndür: -45deg

Kopyala ve Yapıştır Bölümü

Sayfaya bir bölüm ayırıcı tasarım daha ekleyeceğiz. Ancak tasarıma bir adım önde başlamak için, tel kafes görünüm modunu dağıtın ve üst bölümü (bölüm ayırıcı stiliyle) kopyalayın ve metin ve resmi içeren bölümün altına yapıştırın.

Bölüm Ayarlarını Güncelle

Ardından özel kenar boşluğunu aşağıdaki gibi güncelleyin:

Özel Kenar Boşluğu: -100 piksel alt

Ardından, dönüştürme ölçeği seçeneğini kullanarak bölümün boyutunu aşağıdaki gibi küçültebiliriz:

Dönüştürme Ölçeği (X ve Y ekseni): %50

transform translate kullanarak, bölümü aşağıdaki gibi yukarı ve sağa hareket ettirebiliriz:

Dönüştür X eksenini çevir (masaüstü): -%20
Dönüştür Y eksenini çevir (masaüstü): -%100

Dönüştür X eksenini çevir (tablet): %80

Dönüştür X eksenini çevir (tablet): %30

Şimdi bölümü aşağıdaki gibi döndürün:

Dönüştür Döndür Z ekseni (masaüstü): 225deg

Dönüştür Döndür Z ekseni (tablet): -225deg

Son sonuç

Nihai sonucu kontrol edelim. Güzel bir tasarım için bölümlerin tablet ve telefonda nasıl yeniden konumlandırıldığına dikkat edin.

Ve burada aynı düzeni kullanan birkaç farklı Bölücü Stili örneği var. Kendinize ait farklı stiller ve rotasyonlar denemekten çekinmeyin.

Yatay Bölüm Bölücüler Oluşturma

Divi'nin dönüştürme seçenekleri, yatay bölüm bölücü tasarımları oluşturmak için bölüm bölücüleri döndürmemize de olanak tanır. Bu, sayfa içeriğiniz için benzersiz bir arka plan sağlayabilir.

İşte nasıl yapılacağı.

Bölümü Sahte İçerikle Çoğalt

Bu örnek için, yukarıdaki ilk örnek için oluşturduğumuz içeriğin aynı bölümünü kullanabiliriz. Devam edin ve sayfanın altındaki bölümü kopyalayıp yapıştırın.

İçerik Bölümünü Güncelle

Ardından, kopyalanan bölüm için bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Özel Dolgu (masaüstü): 80 piksel üst, 80 piksel alt
Özel Dolgu (tablet): 0 piksel üst

Yatay Bölüm Bölücüyü Oluşturma

Yatay bölüm bölücü oluşturmak için önce içerik bölümünün hemen üzerinde yeni bir normal bölüm oluşturun.

Ardından aşağıdakileri güncelleyin:

Arka Plan Rengi: rgba(0,0,0,0)
Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: rgba(120,168,193,0.45)
Üst Bölücü Yüksekliği: 80vw
Üst Bölücü Çevirme: dikey

Altındaki bölümün üstünde bölüm ayırıcıyı görebileceğimizden emin olmak için Z İndeksini 1'e güncellememiz gerekiyor.

Ardından, bölümümüze aşağıdaki gibi özel bir genişlik ve boşluk vermemiz gerekiyor:

Genişlik: 800 piksel
Bölüm Hizalama: sol
Özel Kenar Boşluğu: -100 piksel üst
Özel Dolgu: 100 piksel üst, 100 piksel alt

Bölümün genişliği (800 piksel), yatay bölüm ayırıcı olarak hizmet etmek üzere döndüğünde bölümün yüksekliği olur. Bu nedenle, altındaki bölümde sahip olduğunuz içerik miktarına bağlı olarak bu yüksekliği ayarlamanız gerekebilir.

Şimdi, dönüştürme seçeneklerini aşağıdaki gibi kullanarak bölümü konumlandırmaya ve döndürmeye hazırız:

Dönüştür X eksenini çevir: -%50
Y eksenini dönüştür: %250

Dönüştür Döndür Z ekseni: -90deg

Son sonuç

İşte tasarımın nihai sonucu.

Ve burada aynı düzeni kullanan birkaç farklı bölücü stili örneği daha var.

Toplama

Web sitenize nasıl benzersiz tasarım ekleyeceğiniz konusunda daha fazla fikir için her zaman yer vardır. Divi'nin dönüştürme seçenekleri ve tasarımı kolay bölüm ayırıcılar ile oldukça yaratıcı şeyler yapabilirsiniz. Umarım, bu eğitimdeki örnekler, bir sonraki projenize yeni bir dönüş getirmek için bazı bölüm ayırıcı arka planlar oluşturmanız için size ilham verecektir.

Yorumlarda sizden haber bekliyorum.

Şerefe!