Divi için 6 ÜCRETSİZ Modül Bölücüyü İndirin ve Kullanın

Şimdiye kadar hepimiz Divi'de bulunan bölüm ayırıcılara alıştık. Geçmiş eğitimlerde, bu bölüm bölücülerin modüllere ve satırlara nasıl uygulanacağını da gösterdik. Ancak diğer tasarım öğelerine değil, yalnızca modüllere bağlı olan modül bölücüler kullanmak istiyorsanız bu yazı tam size göre. Oluşturduğunuz her tür Divi web sitesi için kullanabileceğiniz 6 ÜCRETSİZ modül bölücüyü paylaşacağız. Bu modül bölücüler, bu yazının devamında indirebileceğiniz bir illüstratör dosyasına dahil edilecektir. Bu eğitim aynı zamanda kendi modül bölücü türünüzü oluşturmanıza da yardımcı olacaktır.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, indirebileceğiniz 6 farklı modül bölücüye ve farklı ekran boyutlarında nasıl göründüklerine hızlıca bir göz atalım.

masaüstü

Telefon

Modül Bölücüleri ÜCRETSİZ İndirin

Modül bölücülere el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi ve Cuma günü daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Başlayalım!

Youtube Kanalımıza Abone Olun

Illustrator'da Bölücü Renklerini Değiştirme

Illustrator Dosyasını İndirilen Klasörde Açın

Bu öğreticinin ilk bölümünde, ihtiyacımız olan modül ayırıcıları hazırlayacağız. İndirme klasöründe, belirli bir renk paleti için modül ayırıcıları bulabilirsiniz. Ancak başka bir renk paleti kullanmak istiyorsanız, indirme klasöründe bulabileceğiniz illüstratör dosyasını kullanarak ihtiyacınız olan modül ayırıcıları oluşturmanız gerekecektir.

Modül Bölücü Stilini Seçin, Katmanın Kilidini Açın ve Görünürlüğü Etkinleştirin

Illustrator dosyasını açtıktan sonra devam edin ve katmanlar sekmesinde istediğiniz ayırıcıyı seçin. Katmanın kilidini açın ve hemen başlayabilmeniz için görünürlük seçeneğini etkinleştirin.

Modül Bölücü ve Rengi Değiştir'e tıklayın

Şimdi, kaç modül için bir bölücü oluşturmak istediğinize bağlı olarak, ihtiyacınız olan modül bölücülerin sayısı değişebilir. Örneğin, gönderinin başında size gösterdiğimiz örneği yeniden oluşturmak için, dört farklı renkte modül ayırıcıya ihtiyacımız olacak. Bölücü rengini beyaza çevirerek ilkiyle başlayın.

• Bölücü Rengi: #ffffff

Web için PNG Modül Bölücüyü Dışa Aktar

Rengi değiştirdikten sonra, görüntü modülünü web için PNG görüntü dosyası olarak kaydederek devam edebilirsiniz.

Gerekli Her Renk için Adımları Tekrarlayın (x4)

Daha önce de belirtildiği gibi, çeşitli modül bölücülere ihtiyacınız olacak. Renklerin her biri için önceki adımları tekrarlayın.

• Renk 1: #ffffff
• Renk 2: #2759f6
• Renk 3: #97adf4
• Renk 4: #b2ceff

Divi Tasarımı Oluşturun

Arka Uç Önizlemesi

Tüm modül bölücüleri kaydettikten sonra Divi'ye geçme zamanı! Yarattığımız sonuç, arka uçta şöyle görünecek:

Yeni Bölüm Ekle

Yeni bir sayfa ekleyin veya mevcut bir sayfayı açın ve ona normal bir bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarında bazı değişiklikler yapın.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Sütun 1'e Görüntü Modülü Ekle

Beyaz Modül Bölücüyü Yükle

Sütun 1'de ihtiyaç duyacağımız ilk modül bir Görüntü Modülüdür. İndirme klasöründe bulabileceğiniz ilk modül ayırıcıyı yükleyin veya kendi renk paletinize göre değiştirdiğinizi seçin.

Arka plan rengi

Ardından, Görüntü Modülüne bir arka plan rengi ekleyin. Bu rengin bir sonraki modülün arka plan rengiyle eşleşmesi gerekir.

• Arka Plan Rengi: #2759f6

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve 'Tam Genişliğe Zorla' seçeneğini etkinleştirin.

• Tam Genişliği Zorla: Evet

Sütun 2'ye Blurb Modülü Ekle

İçerik Ekle

Sütun 1'de ihtiyacımız olan ikinci modül bir Blurb Modülü. Seçtiğiniz bazı içeriği ekleyerek başlayın.

Simge Seç

Ardından, istediğiniz bir simgeyi seçin.

Arka plan rengi

Modül bölücü Görüntü Modülü için kullandığınız arka plan rengini ekleyerek devam edin.

• Arka Plan Rengi: #2759f6

Simge Ayarları

Ardından, simge ayarlarına gidin ve bazı değişiklikler yapın.

• Simge Rengi: #ffffff
• Resim/Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 50px

Metin Ayarları

Metin ayarlarını da değiştirin.

• Metin Yönü: Merkez
• Metin Rengi: Açık

Başlık Metni Ayarları

Başlık metninin görünümünü de değiştirin.

• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Yazı Tipi Stili: Büyük Harf

aralık

Ve özel dolgu kullanarak modül için biraz alan yaratın.

• Üst Dolgu: 50px
• Alt Dolgu: 50px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Klon Görüntü Modülü 3 Kez & Blurb Modülü İki Kez

İlk Görüntü Modülünü (modül bölücüyü içeren) ve Blurb Modülünü değiştirmeyi bitirdikten sonra, devam edip Görüntü Modülünü üç kez ve Blurb Modülünü iki kez klonlayabilirsiniz. Bu, arka uçta aşağıdaki sonucu verecektir:

Kopyaları Doğru Sırayla Yerleştirin

Aşağıda gösterildiği gibi, bir Blurb Modülü tarafından takip edilen bir Görüntü Modülü ile başladığınızdan emin olmak için kopyaların sırasını değiştirin:

Bulanıklık Modülü Kopyalarının Arka Plan Renklerini Değiştirin

Ardından, Blurb Modüllerinin arka plan renklerini değiştirin.

• Blurb Modülü #2: #97adf4
• Blurb Modülü #3: #b2ceff

Görüntü Modülünde Modül Bölücüyü Değiştir

İlk kopya Görüntü Modülünü açın ve oluşturduğunuz ikinci modül ayırıcıyı yükleyin (veya indirme klasöründe bulabileceğiniz birini seçin).

Modül Bölücü Görüntü Modülü Arka Plan Rengini Değiştirin (Sonraki Blurb Modülünün Arka Plan Rengiyle Eşleşir)

Yeni modül bölücüyü yükledikten sonra, o Görüntü Modülünün arka plan rengini de değiştirmeniz gerekecektir. Bu rengi, daha sonra gelen Blurb Modülünün arka plan rengiyle eşleştirdiğinizden emin olun.

• Modül Bölücü #2: #2759f6

Kalan İki Bölücü Modül için Adımları Tekrarlayın

Sütundaki kalan iki modül bölücü için önceki adımları tekrarlayın ve işiniz bitti!

• Modül Bölücü #3 Arka Plan Rengi: #97adf4
• Modül Bölücü #4 Arka Plan Rengi: #b2ceff

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi bu yazının başında indirebildiğiniz 6 farklı modül bölücüye son bir göz atalım!

masaüstü

Telefon

Son düşünceler

Bu gönderide, oluşturduğunuz her tür web sitesi için kullanabileceğiniz 6 ücretsiz modül bölücü paylaştık. Bu modül bölücüler, daha eğlenceli bir tasarım oluşturmanıza ve benzersiz ve eğlenceli modüller oluşturmanıza yardımcı olabilir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!