Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor.

Herhangi bir yazılım veya programlama ipucu sunuyorsanız, kesinlikle kod parçacıklarını paylaşmak isteyeceksiniz. Kod parçacıkları paylaşmanın bu yolu, hızlı bir şekilde bir uygulama oluşturmalarına yardımcı olabilir. Ancak, kodu gerekli tüm biçimlendirmeyle paylaşmak varsayılan olarak mümkün değildir. Biçimlendirme ile kastettiğim, sözdizimi vurgulamadır. Yine de yapılması oldukça kolay bir şey.

Neyse ki, kullanırsanız divi, bu kod parçacıklarına özel stiller eklemek için bunu manuel olarak yapmanın yerleşik bir yolu olduğunu bilmelisiniz. Ek olarak, eklentiler ve kaynakların bulunduğu güzel ve işlevsel kod parçacıkları oluşturma sürecini gerçekten basitleştirebilen üçüncü taraflar Divi.

Bu eğitimde, Divi'de (manuel olarak) kod parçacıklarının nasıl paylaşılacağını göstereceğim. Ayrıca sizi bir sonraki seviyeye taşıyacak olan Divi Builder ile nasıl pasaj blokları tasarlayacağınızı da göstereceğim.

anket

Bu öğreticide olası pasaj tasarımlarına genel bir bakışı burada bulabilirsiniz.

Kod parçacıkları içeren Kod Parçacığı Kutuları manuel mod ekledi.

Divi ile kod önizlemesi mümkünEğitim için önkoşullar

Bu eğitim için tek ihtiyacınız olan Divi teması, kurulu ve aktif. Yeni bir sayfada Divi Builder'ı kullanarak örnek kod parçacıklarını sıfırdan oluşturacağız.

Başlamak için yeni bir sayfa oluşturun ve Divi Builder'ı genel arayüzde dağıtın. Ardından "Sıfırdan oluştur" seçeneğini seçin.

Şimdi gitmeye hazırsın!

Divi'de kod parçacıkları için kişiselleştirilmiş bir kutu tasarımı

Kod parçacığımız bir metin modülünde bulunduğundan, metin modülüne (ve çevresine) tasarım öğeleri eklemek için divi oluşturucuyu kullanabiliriz. Bu tasarımda, snippet için bir etiket görevi görecek bir özet modülü kullanacağız. Ardından, imleci metin modülünün soluna biçimlendirip konumlandıracağız. Ardından, pasajımızın metin modülünün stilini belirleyeceğ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.

Sütunda bir satır divi var

Elementor ile web sitenizi kolayca oluşturun

Elementor oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

Ardından, satır parametrelerini aşağıdaki gibi güncelleyin:

Oluk genişliği: 1
Özel dolgu: Üstte 0px, altta 0px

Divi satırı parametresini değiştirMetin modülünü ekle

Ardından satıra bir metin modülü ekleyin.

Divi metin modülü 1Varsayılan içeriği bırakabilirsiniz. WordPress snippet'lerimizi daha sonra ekleyeceğiz. Şimdilik, aşağıdaki metin parametrelerini güncelleyerek metin modülünü modelleyelim:

Arka plan rengi: # eff0f1 Metin rengi: # 000000 Özel kenar boşluğu: 60 piksel sol Özel dolgu:% 3 üst,% 3 alt,% 3 sol,% 3 sağ

Divi metin modülü parametre ayarları

Üst kenarlık genişliği: 10 piksel Üst kenarlık rengi: # 7cda24

Kenarlık metni ayarlarıSnippet etiketini oluşturma

Snippet etiketini oluşturmak için bir blurb modülü kullanacağız. Bu, görüntülenen kod dilinin yanına bir metin simgesi (veya özel resim simgesi) eklemenizi sağlar.

Ürünlerinizi internet üzerinden mi satmak istiyorsunuz?

Fiziksel ve dijital ürünlerinizi WordPress'te satmak ve çevrimiçi mağazanızı kolayca oluşturmak için en iyi e-ticaret eklentileri olan WooCommerce'i ücretsiz indirin. Yeni başlayanlar için mükemmel.

Bir sunum modülü oluşturun ve bunu 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] Simge kullan: EVET Simge: ekran görüntüsüne bakın

Değiştirilmiş divi metin modülüArdından tasarım parametrelerini aşağıdaki gibi güncelleyin:

Arka Plan Rengi: # 1b2426 Simge Rengi: # 7cda24 Resim / Simge Konum: sol Yazı Tipi Boyutu: 20px Metin Başlığı Rengi: #ffffff Metin Boyutu Başlığı: 16px

Blurb divi modülü ayarları

Başlık Satırı Yüksekliği: 1.3em Genişlik: 100px Özel Kenar Boşluğu: -44px Alt, -50px Sol Özel Doldurma: 10px Üst, 2px Alt, 15px Sol, 15px Sağ

Css blurb modülü ayarı

Daha fazla pasaj kutusu tasarımı oluşturmak için bölümü çoğaltın

Bu, ilk kod kutusu tasarımımızı destekler. Şimdi, kod bloğu tasarımını içeren bölümü çoğaltmamız ve farklı bir kodlama dili için yeni bir kod bloğu oluşturmak için etiketi ve renkleri güncellememiz gerekiyor. Bu elbette isteğe bağlıdır, ancak bir sayfaya farklı pasajlar eklemeyi planlıyorsanız, her biri için farklı bir renk şemasına sahip olmak yardımcı olur.

Ö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ü / Simge Rengi üzerine sağ tıklayın ve Bul ve Değiştir'i seçin.

Bir divi bölümünü çoğaltmaGüncellenmiş arama ve değiştirme seçenekleri:

İçinde: bu bölümde Değiştir: [yeni renk] Tümünü değiştir: kontrol edin bulunan tüm değerleri değiştirin

Artık JS parçacıkları için yeni bir parçacık bloğunuz var.

İşte WordPress için popüler kod türleri için bir snippet kutusu örneği.

Divi kod parçacıkları ekleyinManuel kod parçacıklarına sözdizimi vurgulamak için Prettify Code eklentisini kullanma

Peki, manuel yöntemle, hemen metni yapıştırabilir ve iletebilirsiniz. Prettify Kod eklentisi vurgulanan kodu anında tüm "ön" etiketlerine 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.

Kodu çalışırken güzelleştirinCode Prettify geliyor Google tarafından ve aynı zamanda tüm bu harika pasajları sitenizde stilize etmek için de kullanılır. stackoverflow.com.

Bitirmek için

Divi'de kod parçacıklarını görüntülemek zor olmak zorunda değil. Snippet'leri WordPress tarafından sağlanan pre ve Word kod etiketlerini kullanarak manuel olarak eklemek, çoğu html olmayan snippet için işi yapar, ancak önce snippet'i bir kodlayıcı üzerinden çalıştırmanız gerekir. html emin olmak için. Ek olarak, metin modülü ayarlarını kullanarak parçacık metin stilini daha da özelleştirebilirsiniz. Ve manuel snippet'lerinize vurgu eklemek için Code Prettify'ı unutmayın.

Düzenli olarak snippet paylaşanlar için, SyntaxHighlighter eklentisini kullanmak muhtemelen en iyi seçeneğinizdir. Her iki durumda da, Divi Builder'ı kullanarak parçacıklarınıza her zaman daha yaratıcı tasarımlar ekleme seçeneğiniz olacaktır.

Bonne şans.

%d bu sayfayı beğendi blogcular: