Drag & amp;Verimliliği artırmak için divi düşür
Draet ve Drop Divi özelliklerini yüklemek, bir web tasarımcısı olarak verimliliği artırmak için olağanüstü bir araç olabilir. Bu öğreticide, Divi tasarım iş akışınızı geliştirmek için sürükle ve bırak özelliğini kullanmanın 6 yoluyla size rehberlik edeceğim. Size yol boyunca da bazı ipuçları, örnekler ve yararlı bonus kodlarının görüntüleri vereceğim. Varsa, sadece ne olduğunu görmek için dosyaları çekmek ve yayınlamak her zaman eğlencelidir. Başlayalım! Drag & Dropi dosyasının kısa bir incelemesi, Divi Drag & Broon Dosya Yükleme özelliği özelliklerini içerir. Adından da anlaşılacağı gibi, önceki bölümünüzü, satırınızı ve modülünüzü hazırlamak için normal işlemler olmadan içerik eklemek için sayfanıza dosyaları çekebilir ve kaldırabilirsiniz. Ve Divi, dosya türüne bağlı olarak içeriği farklı şekilde yerleştirecektir. Örneğin, TXT dosyası metin modülüne eklenir, HTML dosyası kod modülüne eklenir ve CSS dosyası sayfanıza özel bir CSS olarak eklenir.
Desteklenen dosya türü ve Drag & Release davranışı Buradaki, şu anda Drag & Drop özellikleri tarafından desteklenen her türlü dosya türünün bir listesidir. Bu, tasarım sürecinizdeki özelliklerden yararlanmanın yollarını düşünürken yararlı olabilir. Ayrıca, bu tür bir dosyayı sürüklerken ne olacağını anlamanıza yardımcı olacak kısa bir açıklama ekledim. Görüntü dosyası
Gif
JPEG
JPG
Png
Bir görüntü dosyasına düşerken, Divi bir sütunun yeni bir parça ve satırı oluşturur ve ardından görüntünüz modüle yüklenirken bir görüntü modülü ekler. Aynı anda birkaç resim dosyası girerken, Divi aynı yapıyı (yeni parçalar ve satırlar) oluşturacaktır, ancak resminizi galeriye ekleyecektir.
TXT
TXT dosyasının bırakılması, yeni bölüm ve satırdaki yeni metin modülüne metin ekleyecektir. Yazı tipi dosyası
OTF
TTF
Yazı tipi dosyasını bırakma, yazı tipi adınız ve yazı tipleri yüklendi ile POPUP Capital yükleme yazı tiplerini başlatır. Yapmanız gereken tek şey, yükleme düğmesini tıklamadan önce desteklenen yazı tiplerinin tüm ağırlıklarını eklemek istediğinizi onaylamaktır. Video dosyası
M4V
hareket
Webm
WMV
MP4
Bir veya daha fazla video dosyası bırakma, her videoyu yeni bir bölüm ve satırdaki yeni bir video modülüne ekleyecektir. Ses dosyası
Mp3
Dalga
Bir veya daha fazla ses dosyasını düşürme, her ses dosyasını yeni bölüm ve satırdaki yeni ses modülüne ekleyecektir.
Web dosyası
json
HTML
CSS
JSON dosyası, dışa aktardığınız herhangi bir sayfanın düzeni içindir. JSON dosyasının sürüklenmesi, sayfa düzeni otomatik olarak sayfa içerir. HTML dosyalarının sürüklenmesi, yeni bölüm ve satırdaki yeni kod modülüne HTML ekleyecektir. CSS dosyasının sürüklenmesi, sayfanız için özel olarak CSS kodunu CSS’ye otomatik olarak ekler, bu da sayfa ayarlarınızdaki Gelişmiş sekmesi altında bulunabilir. Genel olarak, süreç sezgiseldir ve iş akışını artırma olasılığı en yüksektir. Bu özelliği kullanabileceğiniz birkaç yol girelim.
#1 CSS Özel Görüntüleri Sayfanıza Gerektiğinde Divi kullanıcılarının çoğunuza özel CSS kullanmanız gerekmediğinden Divi gibi çoğunuza sürükleniyor. Divi’yi bu kadar harika yapan da bu. Bununla birlikte, WordPress temalarının özelleştirilmesi açısından, CSS Custom (Divi’de bile) hala değerli bir varlıktır. İyi bir web geliştiricisi gibi, CSS görüntülerinizi yol boyunca kaydetmeniz gerekir, böylece gelecekteki projeler için kolayca erişebilirsiniz. Bu sadece bir web sitesi oluşturmada sizi daha yetkin hale getirmekle kalmaz, aynı zamanda divi sürükleme ve damla özelliklerinden yararlanmanızı sağlar. Örneğin, divi sayfanızdaki alt altbilgi bıçaklarını gizlemek için bir CSS snippet’iniz vardır. Görüntüleri “Abbahar Altını Gizle” başlığı ile bir CSS dosyası olarak kaydederseniz, dosyayı alıp anında sonuçlar için sayfanıza sürükleyebilirsiniz.
Divi, sayfanıza sürüklediğiniz her CSS dosyasıyla her bir damla ile görüntülerinizi otomatik olarak ayarlar, Divi CSS çıkarır ve sayfanıza ekler. Bu özel CSS’yi sayfa ayarlarınızın devam eden sekmesinin altında istediğiniz zaman görebilirsiniz. Ayrıca, Divi’nin CSS görüntülerinizi yorumlarla sararak akıllıca ayarlayacağını da göreceksiniz. Bilmiyorsanız, bazı kod bloklarını kolayca tanımlamak ve/veya açıklamak için yorumlar kodda kullanılır. CSS parçalarınızdan önce Divi, “Başlat” metniyle bir yorum ve ardından CSS dosyanızın başlığı “Altbilgiyi Gizle” adlı bir yorum girdi. Snippet’ten sonra Divi, “End” metninin ardından dosya başlığı ile başka bir yorum ekler.
Aşağıda, “Altbilgiyi Daha Altını Gizle” i sürükledikten sonra sayfa ayarlarındaki snippet’in görüntülenmesine bir örnek verilmiştir. / * Begin: Alt altbilgiyi gizle */#Main-footer {
}
/ * Son: alt altbilgiyi gizle */
Kendi CSS’nizi nasıl yapacağınızı bilmeyenler için, web’de sizin için sağlayan faydalı öğreticilere güvenebilirsiniz. Bu süper. Hepimiz yapıyoruz. Ancak sürükleme ve gevşek özelliklerden yararlanmak istiyorsanız, snippet’i bireysel bir dosya olarak kaydetmeye başlamak ve uygun adı vermek isteyebilirsiniz. Bu şekilde, her görüntü sadece sürüklenir ve gevşektir.
CSS ile Hover animasyonu için kullanabileceğiniz iki CSS snippet örneği, olasılık neredeyse sınırsızdır. Ama sanırım size sitenize animasyon ekleyecek kitaplığınıza kaydedebileceğiniz bazı CSS görüntüleri örnekleri vereceğim. Aşağıdaki CSS görüntülerini “.css” dosyası olarak kaydedin (“Hover’daki ölçek simgeleri” gibi adlandırın). .et-pb-icon {
-Webkit-Transition: Tüm .2S kolaylığı; -Moz-Transition: Tüm 0.2s kolaylığı;
-MS-Transition: Tüm 0.2s kolaylığı;
-O-geçiş: tüm 0.2s kolaylığı;
Geçiş: Tüm 0.2s kolaylığı;
}
.et-pb-icon: hover {
-Moz-transform: ölçek (1.2);
-Webkit-Transform: Ölçek (1.2);
-O-transform: ölçek (1.2);
Dönüşüm: Ölçek (1.2);
}
Ardından aşağıdaki görüntüleri “Blurb Shadow on Hover” adıyla “.css” dosyası olarak kaydedin.
.et_pb_brurb: hover {
-Moz-box-shadow: 0px 0px 20px #ccc;
-webkit-box-shadow: 0px 0px 20px #ccc;
Box-Shadow: 0px 0px 20px #ccc;
-Webkit-Transition: Tüm 0.5s;
-Moz-Transition: Tüm 0.5s;
Geçiş: tüm 0.5s;
}
Bilgisayarınızda depolanan her iki dosyayı da aldıktan sonra. Her iki dosyayı da seçin ve sayfaya sürükleyin. Elbette isterseniz sadece bir tane sürükleyebilirsiniz, ancak sanırım size birçok dosya ile çalıştığını göstereceğim. Bu, hemen tüm modüllerin, gelişimde bir kutunun gölgesi ekleyerek bir açılır etkiye sahip olmasına neden olur. Bu aynı zamanda imleci ona yönlendirdiğinizde tüm açıklama simgelerinin ölçeklendirilmesine (daha büyük olmasına) neden olacaktır. İşler oldukça havalı. Ve istediğiniz bir CSS dosya deposundan sonra ona nasıl yardım edeceğinizi hayal edebilirsiniz. #2 Özel bir yazı tipini sayfanıza sürükleyin ve bırakın ve geçerli yazı tiplerini hızlı bir şekilde değiştirin Bir web sitesi oluşturursanız, birçok yazı tipi seçeneğinin mevcut olması gerektiğine aşina olursunuz. Divi, Divi Builder’a her şeyi daha kolay hale getiren yüzlerce yazı tipine sahiptir. Ve Divi Builder’ın içinden yeni yazı tipleri yüklemek için her zaman seçenekleri kullanabilirsiniz. Ancak Divi’nin yeni sürükleme ve bırak işlevselliği ile sitenize yeni yazı tipleri eklemek çok basittir.
Daha önce yapılan düzenlerden birini kullandığınızı ancak henüz Divi’de mevcut olmayan yeni yazı tiplerini denemek istediğinizi varsayalım. Yazı tiplerini değiştirmenin kolay bir yolu: Görsel yapımcının etkinleştirildiğinden ve hazır düzeni yüklediğinizden emin olun. O zaman yapmanız gereken, yazı tipi dosyanızı bilgisayardan tarayıcı penceresindeki görsel sayfaya/yapımcıya sürüklemektir. Ardından Yükle düğmesini tıklayın.
Bulma ve Değiştirerek Drag & Drop, daha ileri gitmek için güçlü bir kombinasyondur, önceden hazırlanmış düzen başlığında kullanılan yazı tiplerini yeni girdiğiniz yeni yazı tipleriyle değiştirmek için Bulunma ve Değiştir Divi özelliğini kullanabilirsiniz. Yaratıcı ajansın yön sayfasının düzenini kullanarak, üstteki başlık metnini içeren metin modülünü açın. Ardından yazı tipi başlığı seçeneğine sağ tıklayın. Sağ tıklama menüsünde, Bul ve Değiştir’i seçin. Popup Bul ve Değiştir, “Değiştir” seçeneğinin altındaki yeni yazı tipinizi seçin ve Biru Değiştir düğmesini tıklayın.
Şimdi tüm başlıklarınızda yeni bir yazı tipi var! #3 Sürükle ve bırak işlevselliği ile anında bir fotoğraf galerisi oluşturmak için bazı resimleri sürükleyip bırakın Divi, görüntüleri sitenize kolayca sürüklemenize olanak tanır. Bu, birçok resim içeren web siteleri oluştururken çok kullanışlıdır. Ve çoğu kişi görüntüleri bilgisayarlarındaki klasörlerde saklı tuttuğu için, görüntüyü seçmek ve bunları sayfanıza sürüklemek için çok rahat. Bir resme sürüklerken ve düşerken bu şekilde çalışır. Bir resmi görsel bir yapımcıya sürüklediğinizde, aşağıdakileri otomatik olarak yapar: 1. Bir satır sütunu 2 ile yeni bir normal bölüm oluşturur. Görüntü modülünü satır 3’e ekleyin. Düzenleme işlemini başlatmak için kolaylık olarak görüntü ayarları. Çok fazla görüntüyü sürüklerken böyle çalışır. Çok sayıda görüntüyü görsel yapımcı sayfanıza sürüklediğinizde, Divi otomatik olarak aşağıdakileri yapacaktır: 1. Bir satır sütunu ile yeni bir normal bölüm oluşturun. Galeri modülünü satır 3’e ekleyin. Galeri modülüne yeni bir resim girin. Düzenleme işlemini başlatmaya yardımcı olmak için Modül Ayarları Galerisi’ni açın. Resim galerinizin iyi görünmesini sağlamak için sayfanıza sürüklemeden önce resminizi hazırlayın, önceki bazı optimizasyon yapmak iyidir. İlk görüntü boyutu, tüm resimlerinizin aynı boyutta olduğundan emin olun. Yaklaşık 1500px kat 800 piksel ölçümlü görüntüler kullanmanızı öneririm. Bu, LightBox’ta kullanıldığında görüntüler için iyi bir boyut sağlar. Buna ek olarak, Divi galerideki küçük resim için görüntünün daha küçük bir versiyonunu kullanacaktır. Bu sorunu tartıştığımızda, Divi modülü için önerilen bazı görüntüleri gözden geçirmeye yardımcı olabilir. Bundan sonra, dosya boyutunu TinyPNG’ye sürükleyerek veya Web özellikleri için kaydetmek için fotoğraf düzenleyicinizi kullanarak biraz daha azaltabilirsiniz. Görüntünün başlığı varsayılan olarak, Divi, galerinizdeki her küçük resim altında resminizin başlığını görüntüler. Böylece, (bu başlığın görüntülenmesini istiyorsanız), resminize sürüklemeden önce doğru başlığı vermek için yapar. #4 MP3 dosyalarını, Podcaster için tasarımın üzerinden atlamak için CSS dosyalarıyla sayfanıza sürükleyin, bu kesinlikle üretkenliği artırabilir. Divi Drag & Drop özelliği MP3 ve WAV dosya formatlarını desteklediğinden, geliştiriciye geliştirme işlemini başlatmak için kolayca girebilirsiniz.
Bir MP3 veya WAV dosyasını sayfaya sürüklediğinizde, Divi otomatik olarak aşağıdakileri yapar: 1. Bir satır sütunu 2 ile yeni bir normal bölüm oluşturun. Ses dosyanızla yeni bir ses modülü ekleyin. Birkaç MP3 veya WAV dosyasını sayfaya sürüklediğinizde, Divi bunu birkaç kez yapmazsa, bir ses dosyasını sürüklerken aynı şeyi yapar. 4 ses dosyasını sürüklerseniz, Divi, ekli ses dosyasına sahip ses modülünü içeren bir sütun satırı ile 4 farklı parça oluşturur. Sermaye ses ayarlarının da sayfaya eklenen son ses modülünü düzenlemeye başlaması görülür. Bir sonraki oluşturma için kullanılmak üzere CSS dosyasında parçaları kaydetmenizi öneririm (zaten bildiğinizden emin olmasına rağmen). Bu nedenle, ses modülünü belirli bir şekilde düzenlemek için bir CSS görüntüsünüz varsa, CSS’yi ayrı bir CSS dosyasında kaydedin. Ardından, tüm ses modüllerinizi doğrudan düzenlemek için CSS dosyasını sayfaya kolayca sürükleyebilirsiniz. Yukarıdaki resimde kullandığım CSS hızlı bir örnektir, ancak denemek istiyorsanız, aşağıdaki özel CSS’yi kopyalayın: Üst: -40px; Arka plan: #C5310D; Dolgu: 0.6em; Sol: 50px;}
.et_audio_module_meta {
Pozisyon: Mutlak; Alt: -45px;Sağ: 30px;
Arka plan: #C5310D;
Dolgu: 1em! Önemli;
}
.et_pb_audio_module {
Arka plan: #888! Önemli;
}
.et_audio_container .mejs-playpause-button düğmesi: önce, .et_audio_container.
}
.Mejs-time-handle-content {
Sınır: 4px katı #C5310D;
Yükseklik: 14px;
Sol: -7px;
Üst: -6px;
Genişlik: 14px;
Arka plan: #C5310D;
}
.et_audio_container .mejs-controls.
{
Arka plan: #222;
}
Ardından metin düzenleyicisine yapıştırın ve CSS dosya formatıyla kaydedin (“.css” uzantısına sahip olmalıdır). Bilgisayarınıza sakladıktan sonra. Ses açıklamanızı içeren görsel bir üreticiye sürükleyin. #5 Anında Drag & Dropi özelliğini uygulamak için sayfanıza sürüklenebilen bir arka kodu bloğu yapın. Ne yaptıklarını bilenler için, komut dosyasını sizin için JavaScript işlevi ekleyecek olan HTML dosyasına ekleyebilirsiniz. Ancak bu, anında sonuçlar için sayfaya sürükleyebileceğiniz kullanışlı bir kod bloğu oluşturmak için bu dosyaları birleştirme fırsatı sağlar. Örnek 1: Sayfanıza aktarılan kalem dosyasını sürükleyin ve kaldırın CodePens hayranıysanız, bazı kullanışlı sürükleme ve bırak harikaları hazırlamış olabilirsiniz. Çok heyecanlanmadan önce, sitenizi sürüklerken doğrudan etkileyecek bir dosya oluşturmak için sizi uyarmalıyım, yalnızca HTML ve CSS kombinasyonunu kullanan CodePen ile sınırlı olacaksınız. İşte bu süreç sizin için nasıl çalışabilir. Dışa aktarmak istediğiniz kodayı görüntüleyen sayfayı açın ve sayfanın sağ altındaki dışa aktar düğmesini tıklayın.
Bilgisayarınızdaki dosyaları çıkarın ve HTML dosyaları ve CSS dosyalarını arayın.HTML dosyanızı görmek için metin düzenleyicisini kullanın ve ihtiyacınız olmayan tüm etiketleri (Doctype, HTML, başlık, gövde) kaldırın, böylece kalan tek şey HTML Codepen kutusunda gördüğünüz HTML’dir.Daha sonra dosyayı kaydedin. Aslında, HTML dosyanız için HTML’yi doğrudan kalemden kopyalamak ve kendi HTML dosyanızı oluşturmak daha iyi olabilir.
Şimdi CSS dosyasını bulun (CSS klasöründe bulunmalıdır).SCSS dosyalarını değil, CSS dosyalarını kullandığınızdan emin olun (bu dosya türü sürükle ve bırak özelliği tarafından desteklenmez).Şimdi her iki dosyayı da görsel yapımcı etkinken sayfaya sürükleyin.Bu otomatik olarak olan budur: 1. Divi, bir sütun satırı ile yeni bir rol yapar.2. DIVI, HTML’nizle içerik olarak satmak için bir kod modülü ekler.3. Divi, sayfanızı ayarlayan özel CSS bloğuna özel bir CSS ekler.
Bir hata alırsanız, bu doğru dosya türüne sahip olmadığınız veya dosya içeriğinin desteklenmeyen bir kodu olduğu anlamına gelir. Örneğin, HTML dosyasında bir doküman ve html etiketi varsa, dosya çalışmaz. Ayrıca, CSS dosyanızın bir SCSS kodu varsa, hataları da tetikleyebilir. Gerçekten de, bu ilk başta en sorunsuz süreç değil. Kodunuzu ayarlamanız ve dosyalamanız gerekir. Yani, HTML ve CSS’ye alışık değilseniz, bu zor olabilir. Ancak sonuç, çok değerli olduğu kanıtlanabilir, çünkü tekrar kullanılabilecek birkaç blok kodu saklayabilirsiniz, bu da sadece sürüklenir ve gevşektir. Ayrıca, siz olmayan kodu kopyalamadan önce CODEN lisansına alışmanız gerektiğini de not etmeliyim. Örnek 2: İzole edilmiş örneği şaşırtıcı bir yazı tipinden sayfanıza sürükleyin ve Divi sitenizde harika yazı tipini kullanmaya alışkınsanız, harika yazı tipi örneğini girmenize izin veren birkaç “sürüklemeye hazır” dosyalarından yararlanabilirsiniz. sayfanıza. Bu aslında tek bir HTML dosyasıyla yapılabilir. İşte bu süreç sizin için nasıl çalışabilir. Web sitelerinden harika yazı tipi komut dosyasını 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ı altında, sayfanıza uygulamak istediğiniz HTML ve yazı tipi kodunu ekleyin. Aşağıda, inanılmaz bir yazı tipi simgesi kullanan bir listeye sahip “Drag Ready” HTML kodunun bir örneği:
İçeriğiniz buraya gidiyor.
İçeriğiniz buraya gidiyor.
İçeriğiniz buraya gidiyor. İçeriğiniz buraya gidiyor. İçeriğiniz buraya gidiyor. İçeriğiniz buraya gidiyor. Dosyanızı bir HTML dosyası olarak kaydettiğinizden emin olun. Ardından görsel bir yapımcı ile sayfanıza sürükleyin.
Divi, sizin için kod modülüne otomatik olarak HTML ekleyecek ve şimdi sayfanız için düzenlenmeye hazır inanılmaz bir yazı tipi listeniz var.
İçerik metin ayarlarını kullanabilmeniz için listenin metin modülüne dahil edilmesini umabilirsiniz. Ancak bu otomatik olarak gerçekleşmediğinden, html dosyanızı komut dosyasını ekleyecek şekilde sınırlamak isteyebilirsiniz. Ve sonra HTML’nize metin modülüne yapıştırın. Ancak, tasarımın işlenmesi için CSS dosyalarına sahip olanlarınız için, HTML dosyanızla sürükleyebilmeniz güzel olurdu. #6 Divi ile daha hızlı geliştirme için sayfanıza sürüklenecek sabit sürücünüzde bir Divi Düzen Kütüphanesi (JSON dosyası) oluşturun, tasarladığınız sayfanın tüm düzenini kolayca depolayabilir ve dışa aktarabilirsiniz. Bu işlev için iki büyük fayda vardır. İlk fayda, web siteleri oluştururken tasarım sürecini hızlandırmaya yardımcı olmak için Divi kütüphanesinde sayfa düzenini depolama yeteneğine sahip olmaktır. İkinci fayda, sayfa düzenini kendi bilgisayarınıza dışa aktarma yeteneğine sahip olmaktır. Bu, bir sonraki projenizi başlatmak için değerli bir sayfa düzeni (JSON dosyaları) koleksiyonu toplamanıza olanak tanır. Yeni sürükleme ve gevşek özellik, daha hızlı geliştirme için depolanan düzeni görsel üreticiye hızlı bir şekilde sürüklemenizi sağlar. Bu süreç sizin için böyle çalışabilir. Diyelim ki tasarım ajansının tasarımının düzeninin başlığını kaydetmek istediğinizi varsayalım (bu, istediğiniz herhangi bir tasarım olabilir, ancak bu örnek için hazır düzeni kullanıyorum). Düzeni sayfanıza yükledikten sonra, üst başlık hariç her parçayı düzende silin. Sonra düzeni sabit sürücünüze dışa aktaracaksınız.
Bir görsel yapıcı kullanarak 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 penceresine, adını (“Tasarım Ajansı Başlık Katmanı”) girin ve Dışa Aktar Düzen Düzeni Divi’yi tıklayın.Şimdi sayfamdaki başlığı silersem, sayfam artık herhangi bir parçadan boş olacaksa, JSON dosyasını sayfaya sürükleyerek başlığı kolayca sayfama ekleyebilirim.JSON dosyasını sürüklediğimde, mevcut içeriği değiştirmek veya daha önce yedekleme yapmak için bir seçenek seçmeme izin vermek için Portable Capital otomatik olarak görünür.Herhangi bir içeriği değiştirmem gerekmediğinden, tek yapmam gereken içe aktarma düğmesine tıklamak ve içerik doğrudan sayfaya yüklenir.
