Divi Builder'da Sırayla Nasıl Çalışılır (Tam Kılavuz)

Bir sayfa veya tema oluşturucu şablonu tasarlamanızı kolaylaştırmak için Divi Builder tarafından sunulan üç öğe türü vardır: bölüm, satır ve modül. Bir önceki yazıda Divi Builder bölümünden bahsettik. Daha fazlasını öğrenmek için okuyabilirsiniz. Bu yazıda, satır öğesini ele alacağız. Hem bölüm hem de satır gerekli öğelerdir. Modül eklemek için her iki öğeye de ihtiyacınız var (tasarımınızı oluşturmak için gerçek tasarım öğeleri). Divi Builder'da normal bir bölüme ve uzmanlık bölümüne bir satır eklenebilir. Divi Builder'da yeni bir normal bölüm eklerken bir satır eklemeniz istenecektir.

Bir satırda sütunlar var. İhtiyacınız olan modülleri tasarımınıza yerleştirmek için bir satırdaki sütunları kullanabilirsiniz. Yeni satır eklerken sütun yapısını ihtiyaçlarınıza göre seçebilirsiniz. Divi Builder tarafından sunulan önceden tanımlanmış 20 sütun yapısı vardır.

Divi Builder'da Yeni Satır Nasıl Eklenir

Divi Builder'da satır öğesi yeşil renkle gösterilir. Bu nedenle, yeni bir satır eklemek için tuval alanındaki yeşil artı simgesine tıklamanız yeterlidir. Ardından, görünen iletişim kutusunda sütun yapısını seçebilirsiniz.

Yukarıdaki ekran görüntüsünde de görebileceğiniz gibi, bir satır ekledikten hemen sonra bir modül ekleyebilirsiniz. Önce satırı biçimlendirmeyi ve modülleri daha sonra eklemeyi tercih ederseniz, paneli kapatmanız yeterlidir. Sayfanızda yanlış yere bir modül eklediyseniz, onu taşıyabilirsiniz. Bölümler aynı tipte olduğu sürece (örneğin normal bölüm) bir satırı bir bölümden başka bir bölüme bile taşıyabilirsiniz. Bir satırı taşımayı kolaylaştırmak için Tel Çerçeve Görünümü moduna geçebilirsiniz.

Satır Silme

Mevcut bir satırı silmek için, farenizi silmek istediğiniz satırın üzerine getirip satır tutamacındaki (yeşil tutamaç) çöp kutusu simgesine tıklamanız yeterlidir.

Bir Satırı Özelleştirme

Divi Builder'daki diğer öğeler gibi, bir satırın özelleştirme işlemi de ayarlar paneli üzerinden yapılır. Ayarlar panelini açmak için satır tutamacındaki dişli simgesine tıklayabilirsiniz.

Yanlış sütun yapısını seçtiyseniz, bunu satır ayarları panelinden değiştirebilirsiniz. Sütun Yapısı seçeneğindeki açılır menüden yeni sütun yapısını seçmeniz yeterlidir.

Satır ayarları panelinde satırı özelleştirmek için açabileceğiniz 3 sekme vardır. Her sekme, sunulan ayar seçeneklerinin bulunduğu ayar bloklarını barındırır.

İçerik Sekmesi

• Bağlantı

Özelleştirdiğiniz satıra bir bağlantı eklemek için İçerik sekmesinin altındaki Bağlantı bloğunu açabilirsiniz. Statik bir bağlantı veya dinamik bir bağlantı ekleyebilirsiniz.

• Arka fon

Düzenlediğiniz satırın arka planını ayarlamak için bu bloğu açabilirsiniz. Düz renkli bir arka plan, degrade renkli arka plan, görüntü arka planı veya video arka planı ekleyebilirsiniz. Özellikle görüntü arka planı için paralaks efekti uygulayabilirsiniz.

• Yönetici Etiketi

Satıra bir yönetici etiketi eklemek için bu bloğu açabilirsiniz. Yönetici etiketi nedir? Bunu bir satır adı olarak düşünebilirsiniz. Yönetici etiketleri, Tel Çerçeve Görünümü moduna geçtiğinizde görünecektir. Bir dizi satırdan oluşan uzun bir sayfada belirli bir satırı tanımlamanızı kolaylaştırırlar.

Tasarım Sekmesi

Tasarım sekmesinde açabileceğiniz 7 ayar bloğu vardır.

• boyutlandırma

Satırın genişliğini ve yüksekliğini ayarlamak için bu bloğu açabilirsiniz. Varsayılan olarak, satırın genişliği %80'e ayarlanmıştır. Genişlik seçeneğinden genişliği değiştirebilirsiniz. Yüzde yerine piksel birimini kullanmak istiyorsanız, manuel olarak yazabilirsiniz (yani 900 piksel). Yüksekliği ayarlarken Yükseklik seçeneğinden yapabilirsiniz. Ayrıca bu bloktan oluk genişliğini ve satır hizalamasını da ayarlayabilirsiniz.

Küçük bir not. Tam genişlikte bir satıra sahip olmak istiyorsanız, Genişlik ve Maks Genişlik değerlerini %100 olarak ayarlayabilirsiniz.

• boşluk

Satırın kenar boşluğunu ve dolgusunu ayarlamak için bu bloğu açabilirsiniz.

• Sınır

Satırın kenarlığını ayarlamak için bu bloğu açabilirsiniz. Kenarlık stilinden, kenarlık boyutundan, kenarlık renginden ve kenarlık yarıçapından. Kenarlık yarıçapı, satırın köşe kenarlarının (sağ üst, sol üst, sağ alt, sol alt) eğim seviyesini ifade eder.

• Kutu Gölge

Satırınıza bir kutu gölgesi uygulamak için bu bloğu açabilirsiniz. Aralarından seçim yapabileceğiniz 7 kutu gölge stili vardır. Bir kutu gölgesi seçtikten sonra, gölge rengini, bulanıklık uzunluğunu, yatay konumu ve dikey konumu ayarlayabilirsiniz.

• filtreler

Satırınıza CSS filtreleri eklemek için bu bloğu açabilirsiniz. İsterseniz bir karışım modu da ekleyebilirsiniz.

• dönüştürmek

Satırınıza 2B veya 3B efekt uygulamak için bu bloğu açabilirsiniz. Beğendiğiniz dönüştürme efektini seçin (sekmeyi tıklayarak) ve dönüştürme seviyesini ayarlamak için farenizi kullanın.

• Animasyon

Rengin giriş animasyonunu ayarlamak için Animasyon bloğunu açabilirsiniz. Bir animasyon stili seçtikten sonra, animasyon süresini, gecikmesini ve mevcut diğer ayarları belirleyebilirsiniz.

Gelişmiş sekme

Özel CSS ekleme, görünürlüğü ayarlama, kaydırma efektleri uygulama vb. gibi bazı gelişmiş ayarları yapmak için Gelişmiş sekmesine gidebilirsiniz. Bu sekmede açabileceğiniz 6 ayar bloğu vardır.

• CSS Kimliği ve Sınıfları

Bir CSS kimliği veya CSS sınıfı eklemek için bu bloğu açabilirsiniz. Kod modülü aracılığıyla satıra özel bir CSS eklemek istiyorsanız bu bloğu açabilirsiniz.

• Özel CSS

Kod modülü yerine doğrudan özel bir CSS eklemek için bu bloğu açabilirsiniz. CSS kodunuzu mevcut alanlara kolayca yapıştırabilirsiniz.

• görünürlük

İsterseniz, belirli bir cihaz türünde (masaüstü, tablet veya akıllı telefon) bir satırı devre dışı bırakabilirsiniz. Bunu Görünürlük bloğundan yapabilirsiniz. Satırı devre dışı bırakmak istediğiniz cihaz türünü işaretlemeniz yeterlidir. Ayrıca bu bloktan dikey ve yatay taşmayı da ayarlayabilirsiniz.

• geçişler

Satırın geçiş hızını ve geçiş gecikmesini ayarlamak için bu bloğu açabilirsiniz. Bu bloktan geçiş hızı eğrisini de ayarlayabilirsiniz.

• Konum

Satırın konumunu ayarlamak için bu bloğu açabilirsiniz. Varsayılan olarak, satırın (ve Divi Builder'daki diğer öğelerin) konumu statik (Varsayılan) olarak ayarlanmıştır. Gerekirse değiştirebilirsiniz. Ayarlayabileceğiniz 3 konum seçeneği vardır:

Göreceli: Bu seçeneği belirlerseniz, satır sayfanın normal akışını izleyecektir. Bu seçenek, üst, alt ve sağ özellikleri sunar. Ayrıca Z indeksini de ayarlayabilirsiniz.

Mutlak: Bu seçeneği seçerseniz, sayfada satır için oluşturulmuş gerçek bir alan olmayacaktır. Gerçek yer kaplayan diğer sıraların üzerinde kayan bir sıra olarak düşünebilirsiniz.

Düzeltildi: Bu seçeneği seçerseniz, satır sayfanın normal akışını kesecek ve sayfada gerçek alan kalmayacak.

• Kaydırma Efektleri

Bir satıra daha fazla animasyon efekti uygulamak istiyorsanız, bu bloğu açabilirsiniz.

Bir Satırdaki Sütunları Özelleştirme

Divi Builder'da normal bir bölüm eklerken, en az bir satır eklemeniz istenecektir. Satır eklerken ihtiyaçlarınıza göre bir sütun yapısı seçebilirsiniz. Daha önce de belirtildiği gibi, aralarından seçim yapabileceğiniz 20 sütun yapısı seçeneği vardır. Bir satırın sütun yapısını değiştirmek mümkün müdür? Evet, bir satırın sütun yapısını değiştirebilirsiniz.

Bir satırın sütun yapısını değiştirmek için, ayarlar panelini açmak için satır tutamacındaki dişliye tıklayabilirsiniz. Ayarlar panelinde, Sütun Yapısı seçeneğindeki açılır menüden istediğiniz yeni bir sütun yapısını seçin. Yeni Sütun Ekle düğmesini tıklayarak yeni bir sütun bile ekleyebilirsiniz.

Bir satırdaki her sütunun ayrı stilleri olabilir. Bir satırda iki sütununuz olduğunu varsayalım. Dilerseniz her sütuna farklı bir arka plan, giriş animasyonu vb. uygulayabilirsiniz. Bir sütunu özelleştirmek için dişli simgesine tıklayabilirsiniz. Özelleştirmeyi tıpkı satırda yaptığınız gibi yapabilirsiniz.

Satırdaki bir sütunu yeniden boyutlandırma

Bir satırdaki bir sütunu yeniden boyutlandırmak istiyorsanız, bunu da yapabilirsiniz. Ne yazık ki Divi Builder, Elementor'un bir sütunu yeniden boyutlandırmak için yaptığı gibi sürükle ve bırak işlemi sunmaz. Bir satırdaki bir sütunu yeniden boyutlandırmak için özel bir CSS eklemeniz gerekir.

İlk olarak, yeniden boyutlandırmak istediğiniz sütunu seçin ve dişli çarka tıklayın (yukarıdaki ekran görüntüsünde gösterildiği gibi). Panel, sütun ayarları paneline dönüştüğünde (satır ayarları panelinden), Gelişmiş sekmesine gidin ve Özel CSS bloğunu açın. Aşağıdaki CSS kodunu Ana Öğe alanına yapıştırın.

 genişlik: %10!önemli; 

Genişlik değerini (bu durumda %10) kendi değerinizle değiştirebilirsiniz. Yüzde yerine piksel birimini de (yani 500 piksel) kullanabilirsiniz.

Bir Satırı Kitaplığa Kaydetme

Zaman verimliliği için, bir satırı (özelleştirdiğiniz, modüllerle tamamladığınız) bir Divi Builder kitaplığına kaydedebilirsiniz. Bir öğeyi (satır dahil) kaydetme yeteneği, aynı içeriği farklı sayfalara (özellikler listesi, fiyatlandırma tablosu, ekip üyeleri vb.) eklemeniz gereken uzun bir sayfa oluştururken yeterince kullanışlıdır.

Bir satırı kitaplığa kaydetmek için satır tutamacındaki ok simgesine tıklayabilirsiniz.

Satırınıza bir ad verin ve Kitaplığa Kaydet düğmesini tıklayın. İsterseniz bir kategori de belirleyebilirsiniz.

Kitaplığa kaydettiğiniz bir satırı kullanmak için, yeni satır eklerken Kitaplıktan Ekle sekmesine tıklayıp kullanmak istediğiniz satırı seçmeniz yeterlidir.

Satır Kilitleme

Bir satırı ve içindeki modülleri özelleştirmeyi tamamladığınızda, onu kilitleyebilirsiniz. Bunu yapmak, yanlışlıkla düzenlemenizi önleyecektir. Bir satırı kilitlemek için satır tutamacındaki üç nokta simgesini tıklayıp Kilitle öğesini seçebilirsiniz.

Kilitli bir sıra (ve diğer öğeler) kırmızı bir asma kilitle işaretlenmiştir. Kilitli satırın kilidini açmak için asma kilide tıklayabilirsiniz.

Ayrıca satır tutamacından bir satırı kopyalayabilir ve çoğaltabilirsiniz.

Alt çizgi

Divi Builder ile çalışırken, kendinizi sıraya alıştırmanız gerekir. Üzerinde çalıştığınız sayfanın düzenini ayarlamanızı kolaylaştırmak için Divi Builder tarafından sunulan bir tasarım öğesidir. Normal bir bölüme ve uzmanlık bölümüne bir satır eklenebilir. Divi Builder'daki (ve genel olarak diğer sayfa oluşturucu eklentilerindeki) satır kavramı, bir sayfayı daha kolay tasarlamamıza yardımcı olmak için harikadır.