İndir & amp;Divi için 6 ücretsiz modül böcek kullanın
Şimdi, hepimiz Divi’ye dahil edilen parçaları bölmeye alışkınız. Önceki öğreticide, bu bölüm bölücünün modüller ve çizgiler için nasıl geçerli olmasını sağlayabileceğinizi de gösterdik. Ancak, diğer tasarım öğelerine değil, yalnızca modüle bağlı bir modül bölücü kullanmak istiyorsanız, bu yazı sizin için uygundur. Yaptığınız her türlü Divi web sitesi için kullanabileceğiniz 6 ücretsiz modül böceğini paylaşacağız. Bu modül bölücü, bu yazının altına daha fazla indirebileceğiniz illüstratör dosyasına dahil edilecektir. Bu öğretici ayrıca kendi modül bölücü türünüzü oluşturmanıza yardımcı olacaktır.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, indirebileceğiniz 6 farklı modül bölücünün bir bakışına ve çeşitli ekran boyutlarında nasıl göründüğüne bakalım. Masaüstü
Dosyayı indir
Hadi başlayalım!
YouTube kanalına abone Olduk Illustrator’daki bölücünün rengini değiştiriyoruz, bu öğreticinin ilk bölümünde indirilen klasördeki illüstratör dosyasını açın, ihtiyacımız olan modül bölücüyü hazırlayacağız. İndirme klasöründe, belirli bir renk paleti için bir modül bölücü 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 bölücüsünü yapmanız gerekir.
Modül bölücü stilini seçin, katman kilidini açın ve illüstratör dosyasını açtıktan sonra görünürlüğü etkinleştirin, devam edin ve katman sekmesinde seçtiğiniz bölücüyü seçin. Kilit katmanını açın ve hemen başlayabilmeniz için görünürlük seçeneğini etkinleştirin. Modül bölücüsüne tıklayın ve bir bölücü yapmak istediğinize bağlı olarak, şimdi rengi değiştirin, ihtiyacınız olan modül bölen sayısı farklı olabilir. Örneğin, yazının başında gösterdiğimiz bir örneği yeniden oluşturmak için, dört farklı renkte bir modül bölücüsüne ihtiyacımız var. Bölücünün rengini beyaza değiştirerek birincisi ile başlayın. Renk Renk: #ffffff
Web için PNG Modül Bölücü Dışa Aktarma Rengi değiştirdikten sonra, görüntü modülünü web için bir PNG görüntü dosyası olarak kaydederek devam edebilirsiniz. Daha önce de belirtildiği gibi gerekli renklerin her biri için adımları tekrarlayın, çeşitli modüllere ihtiyacınız var Divisors. Her renk için önceki adımı tekrarlayın. Renk 1: #ffffff Renk 2: #2759F6
Renk 3: #97ADF4
Renk 4: #B2ceff
Bir arka plan divi tasarımı oluşturun Tüm modül böcekleri sakladıktan sonra Divi’ye geçme zamanı! Yaptığımız nihai sonuç arka uçta böyle görünecek:
Yeni bir parça ekleyin, yeni bir sayfa ekleyin veya var olanı açın ve normal bölümü ekleyin. Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarında bazı değişiklikler yapın.
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evetTalang genişliği: 1
Resim Modülünü Sütun 1’e Ekleyin Bölü Beyaz Modülünü Yükle Sütun 1’de ihtiyacımız olan ilk modül görüntü modülüdür. İndirme klasöründe bulabileceğiniz ilk modül bölücüyü yükleyin veya kendi renk paletinize göre değiştirdiğinizi seçin.
Arka plan rengi daha sonra, arka plan rengini görüntü modülüne ekleyin. Bu renk, daha sonra görünen herhangi bir modülün arka plan rengiyle eşleşmelidir. Arka plan rengi: #2759f6 Yapıştırıcı daha sonra boyut ayarlarını açın ve ‘Force Fullwidth’ seçeneğini etkinleştirin.
Tam geniş zorla: Evet Blurb modülünü sütun 2’ye ekleyin Sütun 1’de ihtiyacımız olan ikinci modülün içeriğini ekleyin Bulanık modüldür. Bazı seçim içeriği ekleyerek başlayın.
Bir simge seçin, ardından seçilen simgeyi seçin. Modül görüntü bölücü modülü için kullandığınız arka plan rengini ekleyerek arka plan rengi devam edin. Arka plan rengi: #2759f6 Sonraki simge ayarları, simge ayarlarını açın ve bazı değişiklikler yapın. Ikon Color: #ffffff
Resim Yerleştirme/Simge: Üst Simge yazı tipi boyutu kullanın: evet
Ikon yazı tipi boyutu: 50px
Metin ayarları ayrıca metin ayarlarını da değiştirir.
Metin Oryantasyonu: Orta
Metin Rengi: Işık Başlık Metin Ayarları Değişikliği Başlık metnini de görüntüler.
Ağır yazı tipi başlığı: Ultra Kalın
Yazı tipi stili başlığı: büyük harf Uzaklık ve özel yatak kullanarak modüller için biraz yer açın.
Üst dolgu: 50 piksel
Dolgu Alt: 50 piksel Sol dolgu: 50 piksel
Sağ dolgu: 50px
Klon Görüntü Modülü 3 kez ve Blurb Modülü Birinci görüntü modülünü (modül bölücü içeren) ve bulanıklık modülünü değiştirmeyi bitirdikten sonra, görüntü modülünü üç kez üç kez ve bulanık modülleri iki kez klonlayabilirsiniz. Bu, arka uçta aşağıdaki sonuçları verecektir:
Çoğaltmayı doğru sıraya yerleştirin, aşağıda gösterildiği gibi, görüntü modülü ve ardından bulanıklık modülü ile başladığınızdan emin olmak için kopya siparişini değiştirin:
Yinelenen bulanıklık modülünün arka plan rengini değiştirin, daha sonra, bulanıklık modülünün arka plan rengini değiştirin. Blurb Modülü #2: #97ADF4 Blurb Modülü #3: #B2CEFF Görüntü modülündeki modül bölücüsünü değiştirin Birinci yinelenen görüntü modülünü açın ve oluşturduğunuz ikinci modül bölücüsünü yükleyin (veya indirme klasöründe bulabileceğiniz olanı seçin).
Modül modülü sertifika modülünün arka plan rengini değiştirin (bir sonraki bulanıklık modülünün arka plan rengiyle eşleşen) yeni bir modül bölücüsü yükledikten sonra, görüntü modülünün arka plan rengini de değiştirmeniz gerekir. Bu rengi bir sonraki bulanıklık modülünün arka plan rengiyle eşleştirdiğinizden emin olun. Modül #2: #2759F6
Kalan iki bölme modülü için adımları tekrarlayın Sütundaki kalan iki modül böceği için önceki adımı tekrarlayın ve bitti! Modül bölücü #3 Renk Arka Plan: #97ADF4 Modül bölücü #4 renk arka plan: #b2ceff
Önizleme Şimdi tüm adımlardan geçtik, bu yazının başında indirebileceğiniz son 6 farklı modül böceklerine bakalım! Masaüstü Telefon
Bu yazıdaki son zihin, yaptığınız her türlü web sitesi için kullanabileceğiniz 6 ücretsiz modül böceğini paylaştık. Bu modül bölücü, daha keyifli bir tasarım yapmanıza ve benzersiz ve eğlenceli bir modül yapmanıza yardımcı olabilir. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!