Üretkenliği Artırmak için Divi'nin Sürükle ve Bırak Dosya Yükleme Özelliğini Kullanmanın 6 Yolu

Divi'nin Sürükle ve Bırak Dosya Yükleme özelliği, bir web tasarımcısı olarak üretkenliği artırmak için harika bir araç olabilir. Bu öğreticide, Divi tasarım iş akışınızı geliştirmek için sürükle ve bırak özelliğini kullanabileceğiniz 6 yoldan bahsedeceğim. Bu arada size bazı yararlı ipuçları, örnekler ve bonus kod parçacıkları da vereceğim. Bir şey olursa, ne olduğunu görmek için dosyaları sürükleyip bırakmak her zaman eğlencelidir.

Başlayalım!

Divi'nin Sürükle ve Bırak Dosya Yükleme Özelliğine Kısa Bir Bakış

Sürükle ve Bırak Dosya Yükleme özelliği, Divi Builder'ı kullanırken sayfanıza içerik eklemenin kolay bir yoludur. Adından da anlaşılacağı gibi, bölümünüzü, sıranızı ve modülünüzü önceden ayarlamanın normal süreci olmadan içerik eklemek için dosyaları sayfanıza sürükleyip bırakabilirsiniz. Divi, dosya türüne bağlı olarak içeriği farklı şekilde yerleştirir. Örneğin metin modüllerine txt dosyaları, kod modüllerine html dosyaları ve sayfanıza özel CSS olarak css dosyaları eklenecektir.

Desteklenen Dosya Türleri ve Sürükle ve Bırak Davranışları

Sürükle ve Bırak özelliği tarafından şu anda desteklenen tüm dosya türlerinin listesi. Bu, tasarım sürecinizdeki özellikten nasıl yararlanabileceğinizi düşünürken kullanışlı olabilir. Bu dosya türlerini sürüklerken ne olacağını anlamanıza yardımcı olması için kısa bir açıklama da ekledim.

Görüntü Dosyaları

• gif
• jpeg
• jpg
• png

Tek bir görüntü dosyası bırakıldığında, Divi yeni bir bölüm ve tek sütunlu bir satır oluşturacak ve ardından görüntünüzün modüle önceden yüklenmiş olduğu bir görüntü modülü ekleyecektir.

Aynı anda birden fazla görüntü dosyası bırakırken, Divi aynı yapıyı (yeni bölüm ve satır) oluşturacak, ancak görüntülerinizi bir galeri modülüne ekleyecektir.

Metin Dosyaları

• txt

Bir txt dosyasına bırakmak, metni yeni bir bölüm ve satır içindeki yeni bir metin modülüne ekleyecektir.

Yazı Tipi Dosyaları

• otf
• ttf

Bir yazı tipi dosyasına bırakmak, yazı tipi adınız ve yazı tipi önceden yüklenmiş olarak Yazı Tipi Yükleme açılır modunu başlatır. Tek yapmanız gereken, yükle düğmesine tıklamadan önce desteklenen tüm yazı tipi ağırlıklarını eklemek istediğinizi onaylamak.

Video Dosyaları

• m4v
• hareket
• webm
• wmv
• mp4

Bir veya daha fazla video dosyası bırakmak, her videoyu yeni bir bölüm ve satır içindeki yeni bir video modülüne ekleyecektir.

Ses dosyaları

• mp3
• dalga

Bir veya daha fazla ses dosyası bırakmak, her ses dosyasını yeni bir bölüm ve satır içindeki yeni bir ses modülüne ekleyecektir.

Web Dosyaları

• json
• html
• css

json dosyası, dışa aktardığınız tüm sayfa düzenleri içindir. json dosyasında sürüklemek, sayfa düzenini otomatik olarak sayfaya yükler.

Bir html dosyasında sürüklemek, html'yi yeni bir bölüm ve satır içindeki yeni bir kod modülüne ekler.

Bir CSS dosyasına sürüklemek, css kodunu otomatik olarak sayfanızın özel CSS'sine ekleyecektir; bu, sayfa ayarlarınızdaki gelişmiş sekmesinde bulunabilir.

Genel olarak, süreç sezgiseldir ve iş akışını iyileştirmek için bazı büyük olanaklara sahiptir. Özelliği kullanma yollarından bazılarına girelim.

1 Numaralı Özel CSS Parçacıklarını Gerektiğinde Sayfanıza Sürükleyin

Dışarıdaki çoğu Divi kullanıcısı, özel CSS kullanmak zorunda olmadığınız için Divi'yi özellikle seviyorsunuz. Divi'yi bu kadar harika yapan şey budur. Ancak, WordPress Tema özelleştirmesi söz konusu olduğunda, özel CSS (Divi içinde bile) hala değerli bir varlıktır.

Herhangi bir iyi web geliştiricisi gibi, gelecekteki projeler için kolayca erişebilmek için CSS snippet'lerinizi yol boyunca kaydetmelisiniz. Bu, sizi yalnızca web siteleri oluşturma konusunda daha yetkin kılmakla kalmayacak, aynı zamanda Divi'nin sürükle ve bırak özelliğinden yararlanmanıza da olanak sağlayacaktır.

Örneğin, Divi sayfanızdaki alt bilgi çubuğunu gizlemek için bir CSS parçacığınız olduğunu varsayalım. Bu snippet'i "Alt Altbilgiyi Gizle" başlıklı bir css dosyası olarak kaydederseniz, o dosyayı alıp anında sonuçlar için sayfanıza sürükleyebilirsiniz.

Divi, Snippet'lerinizi Her Damlada Otomatik Olarak Düzenler

Sayfanıza sürüklediğiniz her css dosyasıyla Divi, CSS'yi çıkarır ve sayfanıza ekler. Bu özel css'yi istediğiniz zaman sayfa ayarlarınızın gelişmiş sekmesinde görüntüleyebilirsiniz.

Divi'nin css snippet'inizi yorumlarla sararak akıllıca düzenleyeceğini de fark edeceksiniz. Bilmiyorsanız, belirli kod bloklarını kolayca tanımlamak ve/veya açıklamak için kod içinde yorumlar kullanılır. Divi, CSS snippet'inizden önce "Başla" metnini ve ardından CSS dosyanızın başlığı "Alt Altbilgiyi Gizle" içeren bir yorum ekler. Snippet'ten sonra Divi, dosyanın başlığının ardından “End” metniyle birlikte başka bir yorum ekler.

Aşağıda, "Alt Altbilgiyi Gizle" CSS dosyasına sürükledikten sonra sayfa ayarlarında bir snippet'in nasıl görüneceğine dair bir örnek verilmiştir.

/* BEGIN: Hide Bottom Footer */
#main-footer {
    display: none;
}
/* END: Hide Bottom Footer */

Kendi css'inizi nasıl oluşturacağınızı bilmeyenler için, web'de sizin için sağlayan yardımcı öğreticilere güvenebilirsiniz. Çok havalı. Hepimiz yapıyoruz. Ancak, sürükle ve bırak özelliğinden yararlanmak istiyorsanız, bu parçacıkları ayrı dosyalar olarak kaydetmeye ve buna göre adlandırmaya başlamak isteyebilirsiniz. Bu şekilde, her bir snippet yalnızca bir sürükle ve bırak yöntemidir.

Vurgulu Animasyon için Kullanabileceğiniz İki CSS Parçacığı Örneği

CSS ile olasılıklar neredeyse sonsuzdur. Ama kitaplığınıza kaydedebileceğiniz ve sitenize animasyon katacak bir kaç css parçacığı örneği vereyim dedim.

Aşağıdaki css snippet'ini bir ".css" dosyası olarak kaydedin ("Hover Simgelerini Ölçekle" gibi bir ad verin).

.et-pb-icon {
  -webkit-transition: all .2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

Ardından, aşağıdaki parçacığı “Hover Blurb Shadow” adında başka bir “.css” dosyası olarak kaydedin.

.et_pb_blurb:hover {
    -moz-box-shadow: 0px 0px 20px #ccc;
    -webkit-box-shadow: 0px 0px 20px #ccc;
    box-shadow: 0px 0px 20px #ccc;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

Her iki dosyayı da bilgisayarınıza kaydettikten sonra. Her iki dosyayı da seçin ve sayfaya sürükleyin. Tabii isterseniz sadece bir tanesini sürükleyebilirsiniz, ama ben size bunun birden fazla dosyayla da çalıştığını göstereyim dedim. Bu, fareyle üzerine gelindiğinde bir kutu gölgesi ekleyerek tüm tanıtıcı modüllerin hemen bir açılır pencere efektine sahip olmasına neden olur. Ayrıca, üzerlerine geldiğinizde tüm tanıtıcı simgelerin ölçeklenmesine (büyümesine) neden olur.

Çok güzel şeyler.

Ve bu css dosyalarının bir cephaneliğine sahip olduğunuzda ne kadar yararlı olacağını hayal edebilirsiniz.

#2 Özel Yazı Tiplerini Sayfanıza Sürükleyip Bırakın ve Mevcut Yazı Tiplerini Hızla Değiştirin

Web siteleri oluşturuyorsanız, geniş bir yazı tipi yelpazesine sahip olma ihtiyacına aşinasınızdır. Divi, Divi Builder'da yerleşik olarak bulunan ve işleri çok daha kolay hale getiren yüzlerce yazı tipine sahiptir. Ayrıca Divi Builder'ın içinden yeni yazı tiplerini yükleme seçeneğini her zaman kullanabilirsiniz. Ancak Divi'nin yeni Sürükle ve Bırak işleviyle sitenize yeni yazı tipleri eklemek gülünç derecede basittir.

Diyelim ki önceden hazırlanmış düzenlerden birini kullanıyorsunuz ancak Divi'de henüz bulunmayan yeni bir yazı tipini denemek istiyorsunuz. Yazı tipini değiştirmenin ne kadar kolay olduğu aşağıda açıklanmıştır:

Görsel oluşturucunun etkinleştirildiğinden ve hazır düzeninizin yüklendiğinden emin olun. O zaman tek yapmanız gereken, yazı tipi dosyanızı bilgisayarınızdan tarayıcı penceresinin içindeki sayfa/görsel oluşturucuya sürüklemektir. Ardından yükle düğmesine tıklayın.

Bul ve Değiştir ile Sürükle ve Bırak, Güçlü Bir Kombo

Bunu bir adım daha ileri götürmek için Divi'nin Bul ve Değiştir özelliğini kullanarak hazır düzen başlıklarında kullanılan yazı tipini az önce bıraktığınız yeni yazı tipiyle değiştirebilirsiniz.

Yaratıcı Ajans Açılış Sayfası düzenini kullanarak, üst kısımdaki başlık metnini içeren metin modülünü açın. Ardından başlık yazı tipi seçeneğine sağ tıklayın. Sağ tıklama menüsünde Bul ve Değiştir'i seçin.

Bul ve Değiştir açılır penceresinde, "Şununla Değiştir" seçeneğinin altındaki yeni yazı tipinizi seçin ve mavi Değiştir düğmesini tıklayın.

Artık tüm başlıklarınızın yeni yazı tipi yerinde!

#3 Başlıklarla Anında Fotoğraf Galerileri Oluşturmak için Birden Fazla Görseli Sürükleyip Bırakın

Divi'nin Sürükle ve Bırak işlevi, görüntüleri sitenize kolaylıkla sürüklemenizi sağlar. Bu, çok sayıda resim içeren web siteleri oluştururken gerçekten kullanışlıdır. Ve çoğu kişi kayıtlı resimleri bilgisayarındaki bir klasörde tuttuğundan, bu resimleri seçip sayfanıza sürüklemek son derece kullanışlıdır.

Tek bir görüntüde sürükleyip bırakırken nasıl çalıştığı aşağıda açıklanmıştır.

Tek bir görüntüyü görsel oluşturucuya sürüklediğinizde, otomatik olarak aşağıdakileri yapacaktır:
1. Bir sütun satırıyla yeni bir normal bölüm oluşturun
2. Satıra bir görüntü modülü ekleyin
3. Görüntüyü bu görüntü modülüne yerleştirin
4. Düzenleme işlemini başlatmak için kolaylık olması için görüntü ayarlarını açın.

Birden çok görüntüde sürüklerken nasıl çalıştığı aşağıda açıklanmıştır.

Görsel oluşturucu sayfanıza birden fazla görüntü sürüklediğinizde Divi otomatik olarak aşağıdakileri yapacaktır:

1. Bir sütun satırıyla yeni bir normal bölüm oluşturun
2. Satıra bir Galeri Modülü ekleyin
3. Yeni görüntüleri Galeri modülüne ekleyin
4. Düzenleme sürecini hızlandırmak için Galeri Modülü ayarlarını açın.

Resimlerinizi Sayfanıza Sürüklemeden Önce Hazırlayın

Resim galerinizin harika görünmesini sağlamak için önceden birkaç optimizasyon yapmanıza yardımcı olur.

Görüntü boyutu
Öncelikle, resimlerinizin hepsinin aynı boyutta olduğundan emin olun. 1500 piksele 800 piksel civarında olan resimler kullanmanızı öneririm. Bu, bir ışık kutusuna yerleştirildiğinde görüntüler için güzel bir boyut sağlar. Ayrıca Divi, galerideki küçük resim için görüntünün daha küçük bir sürümünü kullanacaktır. Konu üzerindeyken, Divi Modülleri için önerilen bazı resim boyutlarını gözden geçirmek yardımcı olabilir. Bundan sonra, dosya boyutunu TinyPNG'ye sürükleyerek biraz daha küçültebilir veya web özellikleri için kaydetmek üzere fotoğraf düzenleyicinizi kullanabilirsiniz.

Resim Başlıkları
Varsayılan olarak Divi, galerinizdeki her küçük resmin altında resminizin başlığını görüntüler. Bu nedenle, o zamandan beri (bu başlığın görüntülenmesini istiyorsanız), resimlerinize sürüklemeden önce doğru bir başlık vermenizi sağlar.

#4 Tasarımı Hızlı Başlatmak için MP3 Dosyalarını CSS dosyasıyla Sayfanıza sürükleyin

Dışarıdaki podcast yayıncıları için bu kesinlikle üretkenliği artırabilir. Divi'nin Sürükle ve Bırak özelliği mp3 ve wav dosya biçimlerini desteklediğinden, bunları oluşturma sürecini hızlandırmak için kolayca oluşturucuya bırakabilirsiniz.

Tek bir mp3 veya wav dosyasını sayfaya sürüklediğinizde Divi otomatik olarak şunları yapacaktır:

1. Bir sütun satırıyla yeni bir normal bölüm oluşturun
2. Ses dosyanızın ekli olduğu yeni bir ses modülü ekleyin
3. Düzenleme işlemine başlamak için otomatik ayarlar modunu açın.

Sayfaya birden fazla mp3 veya wav dosyası sürüklediğinizde, Divi tek bir ses dosyasını sürüklerken yaptığının aynısını yapacaktır, ancak bunu birden çok kez yapacaktır. Bu nedenle, 4 ses dosyasını sürüklerseniz, Divi, ses dosyasının ekli olduğu ses modülünü içeren bir sütun satırı ile 4 farklı bölüm oluşturacaktır. Ses ayarı modu, sayfaya eklenen son ses modülünü düzenlemeye başlamak için de açılır.

Tüm ses modüllerini bir kerede anında biçimlendirmek için bir CSS dosyasında sürükleyin

Divi sayfalarınıza ek stil eklemek için özel CSS kullanmaya alışkınsanız, bu parçacıkları gelecekteki derlemeler için kullanmak üzere bir css dosyasına kaydetmenizi öneririm (ancak bunu zaten bildiğinizden eminim). Bu nedenle, ses modüllerini belirli bir şekilde stillendirmek için bir css snippet'iniz varsa, bu css'i ayrı bir css dosyasına kaydedin. Ardından, tüm ses modüllerinizi anında biçimlendirmek için bu css dosyasını sayfaya sürükleyebilirsiniz.

Yukarıdaki çizimde kullandığım CSS hızlı bir örnek, ancak denemek isterseniz aşağıdaki özel CSS'yi kopyalayın:

.et_pb_audio_module_content h2 {position: absolute;
    top: -40px;
    background: #c5310d;
    padding: 0.6em;
    left: 50px;}
.et_audio_module_meta {
    position: absolute;
    bottom: -45px;
    right: 30px;
    background: #c5310d;
    padding: 1em !important;
}
.et_pb_audio_module {
background: #888 !important;
}

.et_audio_container .mejs-playpause-button button:before, .et_audio_container .mejs-volume-button button:before {
    color: #c5310d;
}

.mejs-time-handle-content {
    border: 4px solid #c5310d;
    height: 14px;
    left: -7px;
    top: -6px;
    width: 14px;
    background: #c5310d;
}
.et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total
{
background: #222;
}

Ardından bir metin düzenleyiciye yapıştırın ve bir css dosya biçiminde kaydedin (“.css” uzantısına sahip olmalıdır). Bir kez bilgisayarınıza kaydedin. Sesli tanıtım yazılarınızı içeren görsel oluşturucuya sürükleyin.

#5 Anında Uygulama için Sayfanıza Sürüklenebilecek Yeniden Kullanılabilir Kod Blokları Oluşturun

Divi'nin Sürükle ve Bırak özelliği, CSS ve HTML dosyalarını destekler (maalesef javascript dosyalarına izin verilmez). Ne yaptıklarını bilenler için, HTML dosyasına bu javascript işlevini sizin için ekleyecek komut dosyaları ekleyebilirsiniz. Ancak bu, anında sonuçlar için bir sayfaya sürükleyebileceğiniz faydalı kod blokları oluşturmak için bu dosyaları birleştirme fırsatı verir.

Örnek 1: Dışa Aktarılan Kod Kalemi dosyalarını Sayfanıza Sürükleyip Bırakın

Codepens hayranıysanız, bazı yararlı sürükle ve bırak büyüsü için zaten ayarlanmış olabilirsiniz. Çok heyecanlanmadan önce sizi uyarmalıyım ki, onları sürüklediğinizde sitenizi anında etkileyecek dosyalar oluşturmak için sadece html ve css kombinasyonunu kullanan codepen'lerle sınırlı olacaksınız.

İşte bu süreç sizin için nasıl çalışabilir.

Dışa aktarmak istediğiniz Codepen'in bulunduğu sayfaya gidin ve sayfanın sağ alt kısmındaki dışa aktar düğmesini tıklayın.

Bilgisayarınızdaki dosyaları çıkarın ve html dosyasını ve css dosyasını bulun. Html dosyanızı görüntülemek için bir metin düzenleyici kullanın ve ihtiyacınız olmayan tüm etiketleri (doctype, html, başlık, gövde) çıkarın, böylece geriye kalan tek şey codepen'in html kutusunda gördüğünüz html'dir. . Ardından dosyayı kaydedin.

Aslında, HTML dosyası için, HTML'yi doğrudan kalemden kopyalayıp kendi html dosyanızı oluşturmanız daha iyi olabilir.

Şimdi CSS dosyasını bulun (CSS klasörünün içinde olmalıdır). SCSS dosyasını değil, CSS dosyasını kullandığınızdan emin olun (Bu dosya türü Sürükle ve Bırak özelliği tarafından desteklenmez).

Şimdi görsel oluşturucu etkinken her iki dosyayı da sayfaya sürükleyin.

Bu otomatik olarak gerçekleşir:

1. Divi, tek sütunlu bir satırla yeni bir bölüm oluşturur.
2. Divi, içerik olarak html'nizi içeren satıra bir kod modülü ekleyin.
3. Divi, sayfa ayarları özel CSS bloğunuza özel css ekler.

Bir hata alırsanız, bu ya doğru dosya türüne sahip değilsiniz ya da dosyanın içeriğinde desteklenmeyen bir kod var demektir. Örneğin, html dosyasında doctype ve html etiketleri varsa, dosya çalışmayacaktır. Ayrıca, css dosyanızda SCSS kodu varsa bu da bir hatayı tetikleyebilir.

Verilmiş, bu başlangıçta en yumuşak süreç değil. Kodunuzu ve dosyalarınızı biraz düzenlemeniz gerekecek. Dolayısıyla, html ve CSS'ye aşina değilseniz, bu bir mücadele olabilir. Ancak sonuç, yalnızca bir sürükle ve bırak yöntemiyle yeniden kullanılabilen bazı kod bloklarını stoklayabileceğiniz için çok değerli olabilir.

Ayrıca, kendinize ait olmayan bir kodu kopyalamadan önce Codepen'in lisanslamasına aşina olmanız gerektiğini de belirtmeliyim.

Örnek 2: Harika Yazı Tipinin İzole Örneklerini Sayfanıza Sürükleyip Bırakın

Divi sitenizde Font Awesome'i kullanmaya alışkınsanız, sayfanıza Font Awesome örneklerini eklemenize olanak tanıyan birkaç "sürüklemeye hazır" dosyadan yararlanabilirsiniz. Bu aslında tek bir HTML dosyasıyla yapılabilir.

İşte bu süreç sizin için nasıl çalışabilir.

Font Awesome betiğini web sitelerinden alın. SVG + JS sürümü olduğundan emin olun. Ardından komut dosyasını panonuza kopyalayın.

Ardından yeni bir metin dosyası oluşturun ve kodu yapıştırın. Komut dosyasının altına, sayfanıza dağıtmak istediğiniz html ve yazı tipi kodunu ekleyin.

İşte harika yazı tipi simgelerinin kullanıldığı bir liste içeren "sürükle-hazır" bir html kodu örneği:

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

<h2>Header</h2>
<ul class="fa-ul" style="list-style:none; font-size: 18px">
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
</ul>

Dosyanızı bir html dosyası olarak kaydettiğinizden emin olun. Ardından görsel oluşturucu ile sayfanıza sürükleyin.

Divi, html'yi sizin için bir kod modülüne otomatik olarak ekleyecektir ve şimdi sayfanız için düzenlemeye hazır harika bir yazı tipi listeniz var.

Muhtemelen, içeriğin metin ayarlarını kullanabilmeniz için listenin bir metin modülüne konmasını dilersiniz. Ancak bu otomatik olarak gerçekleşmediğinden, html dosyanızı komut dosyasını içerecek şekilde sınırlamak isteyebilirsiniz. Ardından html'nizi bir metin modülüne yapıştırın. Ancak tasarımı halletmek için elinde bir css dosyası olanlarınız için, bunu html dosyanızla birlikte sürükleyebilmek güzel.

#6 Daha Hızlı Geliştirme için Sayfalarınıza Sürüklemek için Sabit Diskinizde bir Divi Sayfa Düzenleri Kitaplığı (json dosyaları) oluşturun

Divi ile, tasarladığınız tüm sayfa düzenlerini kolayca kaydedebilir ve dışa aktarabilirsiniz. Bu işlevin gerçekten iki büyük faydası vardır. İlk fayda, bir web sitesi oluştururken tasarım sürecini hızlandırmaya yardımcı olmak için Divi Kitaplığı içindeki sayfa düzenlerini kaydetme yeteneğine sahip olmaktır. İkinci avantaj, sayfa mizanpajlarını kendi bilgisayarınıza aktarabilme yeteneğine sahip olmaktır. Bu, bir sonraki projenizi başlatmak için değerli bir sayfa düzeni koleksiyonu (json dosyaları) biriktirmenize olanak tanır.

Ve yeni Sürükle ve Bırak özelliği, daha da hızlı geliştirme için kaydedilen düzenleri görsel oluşturucuya hızla sürüklemenize olanak tanır.

İşte bu süreç sizin için nasıl işe yarayabilir.

Tasarım Ajansı Açılış Sayfası düzeninin yalnızca başlık bölümünü kaydetmek istediğinizi varsayalım (Bu, istediğiniz herhangi bir tasarım olabilir, ancak bu örnek için önceden hazırlanmış bir düzen kullanıyorum). Düzeni sayfanıza yükledikten sonra, üst başlık bölümü hariç düzendeki her bölümü silin. Ardından düzeni sabit sürücünüze aktarırsınız.

Görsel oluşturucuyu kullanarak bir sayfa düzenini dışa aktarmak için ayarlar menüsünü açın ve taşınabilirlik simgesini tıklayın. Ardından taşınabilirlik açılır penceresinde bir ad girin (“Tasarım Ajansı Başlık Düzeni”) ve Divi Builder Düzenini Dışa Aktar düğmesini tıklayın.

Bu, düzeni bilgisayarınıza bir json dosyası olarak kaydeder.

Şimdi sayfamdaki başlık bölümünü silersem, sayfamda artık herhangi bir bölüm kalmamışsa, json dosyasını sayfaya sürükleyerek o başlığı kolayca sayfama ekleyebilirim.

Json dosyasını sürüklediğimde, mevcut içeriği değiştirme veya önceden bir yedekleme oluşturma seçeneğini seçmeme izin vermek için taşınabilirlik modeli otomatik olarak açılır. Herhangi bir içeriği değiştirmem gerekmediği için tek yapmam gereken içe aktar düğmesine tıklamak ve anında sayfaya yükleniyor.

Bu o kadar etkileyici görünmeyebilir, ancak tasarım sürecini gerçekten hızlandırma olasılığı var. Farklı sayfa düzenlerine sahip geniş bir json dosyası koleksiyonum olsaydı (her biri sevdiğim belirli öğelere sahip). Daha sonra bu dosyaları yapı taşı gibi kullanabilir ve tek tek sayfaya sürükleyebilirim. Bunları dışa aktarırken verdiğiniz başlıklarda açıklayıcı olduğunuzdan emin olun.

Son düşünceler

Divi'nin Sürükle ve Bırak özelliği, web tasarımı iş akışınızı geliştirmek için kesinlikle yararlı bir araç olabilir. İlk başta biraz hayal kırıklığına neden olabilecek bazı sınırlamalar vardır, ancak umarım bu makale, web tasarımında üretkenliğinizi artıracak kişisel bir sürüklenebilir dosya kitaplığı oluşturmak için bu özellikten nasıl yararlanacağınızı anlamanıza yardımcı olur.

Aşağıdaki yorumlarda kendi fikirlerinizi duymak isterim.

Şerefe!