Divi: Kullanılacak en kolay WordPress teması
Divi: Tüm zamanların en iyi WordPress teması!
daha fazla 600.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]
Programlama hakkında yazılım veya hile yaparsanız, kesinlikle kod snippet'lerini paylaşmak isteyeceksiniz. Bu kod snippet'lerini paylaşmanın bu yolu hızlı bir şekilde bir araya getirmelerine yardımcı olabilir. Ancak, gerekli tüm biçimlendirme ile kod paylaşımı varsayılan olarak mümkün değildir. Biçimlendirme ile kastettiğim, sözdizimi vurgulamasıdır. Yine de, yapmak oldukça kolay bir şey.
Neyse ki, eğer divi kullanıyorsanız, bu parçacıklara özel stiller eklemek için bunu manuel yapmak için entegre bir yöntem olduğunu bilmelisiniz. Ek olarak, Divi'de estetik ve işlevsel kod parçacıkları oluşturma işlemini gerçekten basitleştirebilecek üçüncü taraf eklentileri ve kaynakları vardır.
Bu derste, size kod snippet'lerini Divi'de (elle) nasıl paylaşacağınızı göstereceğim. Ayrıca, sizi bir sonraki seviyeye götürecek olan Divi Builder ile kod parçacıklarının nasıl tasarlandığını göstereceğim.
anket
İşte bu eğitimdeki olası snippet tasarımlarına genel bir bakış.
Kod parçacıklarını içeren Kod Parçacık Kutuları, manuel modu ekledi.
Bu ders için ihtiyacınız olan tek şey yüklü ve aktif olan Divi teması. Yeni bir sayfada Divi Builder'ı kullanarak sıfırdan kod parçası örnekleri oluşturacağız.
Başlamak için yeni bir sayfa oluşturun ve Divi Builder'ı ortak arayüze yerleştirin. Sonra "Sıfırdan Yap" seçeneğini seçin.
Şimdi gitmeye hazırsın!
Divi'deki kod parçacıkları için özel kutu tasarımı
Kod snippet'imiz bir metin modülünde bulunduğundan, divi oluşturucuyu metin modülünün içine ve çevresine tasarım öğeleri eklemek için kullanabiliriz. Bu tasarım için, kod snippet'i için bir etiket görevi görecek bir özet modülü kullanacağız. Ardından, imleci metin modülünün soluna yerleştirecek ve yerleştireceğiz. Sonra kod snippet'inizin metin modülünü stilize edeceğiz.
Bölüm, satır ve sütun oluşturma
Önce bir satırlık sütunu olan yeni bir bölüm oluşturmalıyız.
Elementor ile web sitenizi kolayca oluşturun
Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]
Ardından, satır parametrelerini aşağıdaki gibi güncelleyin:
Oluk genişliği: 1
Özel dolgu: Üstte 0px, altta 0px
Ardından satıra bir metin modülü ekleyin.
Arka Plan Rengi: #eff0f1 Metin Rengi: #000000 Özel Marj: 60px Sol Özel Dolgu: 3% Yukarı,% 3% Aşağı,% 3 Sol,% 3 Sağ
Üst kenarlığın genişliği: 10px Üst kenarlığın rengi: #7cda24
Kod pasajı etiketini oluşturmak için, bulanık bir modül kullanacağız. Bu, görüntülenen kod dilinin yanına bir sunum metni simgesi (veya özel bir resim simgesi) eklemenizi sağlar.
En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?
Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]
Bir sunum modülü oluşturun ve onu metin modülünün üzerine sürükleyin. Ardından, aşağıdaki sunum ayarlarını güncelleyin:
Başlık: css İçerik: [hayali içeriği kaldırın] Simgesini kullanın: YES Simgesi: ekran görüntüsüne bakın
Arka plan rengi: #1b2426 Simge rengi: #7cda24 Görüntünün konumu / simgesi: sol Yazı tipi boyutu: 20px Metin başlığı Renk: #ffffff Metin boyutu: 16px
Başlık satırı yüksekliği: 1.3em Genişlik: 100px Özel kenar boşluğu: -44px altta, -50px soldaki Özel dolgu: 10px üstte, 2px sağdaki, 15px, solda 15px
Daha fazla kod parçacığı kutusu tasarımları oluşturmak için yinelenen bölüm
Bu, ilk kod kutusu tasarımımızı desteklemektedir. Sadece kod bloğu tasarımını içeren bölümü kopyalamalıyız ve farklı bir kodlama dili için yeni bir kod bloğu oluşturmak için etiketi ve renkleri güncellemeliyiz. Bu elbette isteğe bağlıdır, ancak bir sayfaya farklı kod parçacıkları eklemeyi planlıyorsanız, her biri için farklı bir renk şeması olması yararlı olacaktır.
Örneğin, bölümü çoğaltın ve Blurb modülü ayarlarını açın.
Javascript için "js" başlığını güncelleyin.
Ardından Görüntü Rengi / Simgesine sağ tıklayın ve Bul ve Değiştir'i seçin.
İçinde: bu bölüm Şununla değiştir: [yeni renk] Tümünü değiştir: bulunan tüm değerleri değiştir kontrol et
Artık JS kod parçacıkları için yeni bir kod parçacıkları bloğunuz var.
WordPress için popüler kod türleri için kod pasajı alanlarına bir örnek.
Peki, manuel yöntemle, hemen metni yapıştırabilir ve iletebilirsiniz. Prettify Kod eklentisi anında tüm ön etiketlere vurgulanan kodu ekleyecektir. Bu eklentinin güzelliği, kesinlikle hiçbir özelleştirme gerekmemesidir. Tek yapmanız gereken eklentiyi indirmek ve etkinleştirmek.
İşte kodun Active Prettify Code ile nasıl görüneceğine bir örnek.
Çevrimiçi Mağazanızı kolayca oluşturun
WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]
Bitirmek için
Divi'de pasajları göstermek zor olmak zorunda değil. WordPress tarafından sağlanan ön ve Word kod etiketlerini kullanarak kod parçacıklarını el ile eklemek, çoğu HTML olmayan kod parçacıklarının işini gerçekleştirir, ancak önce kod pasajını bir kodlayıcıda çalıştırmanız gerekir emin olmak için html. Ek olarak, metin modülü ayarlarını kullanarak kod pasajının metin stilini daha da özelleştirebilirsiniz. Ve manuel kod parçacıklarınıza bir vurgu eklemek için Code Prettify'yi de unutmayın.
Düzenli olarak kod parçacıklarını paylaşanlar için, SyntaxHighlighter eklentisini kullanmak muhtemelen en iyi seçimdir. Her neyse, Divi Builder'ı kullanarak snippet'inize daha yaratıcı tasarımlar ekleyebileceksiniz.
Bonne şans.