Divi dönüşüm ayarlarına sahip bir aile ağacı nasıl yapılır
Hiç web siteniz için bir aile ağacı yapmaya çalıştınız, ancak tam olarak nasıl yaklaşacağınızı bilmiyor musunuz? Bugünün Divi öğreticisinde size nasıl yapılacağını göstereceğiz. Aile şecere yapmanın yanı sıra, tüm ekran boyutlarında duyarlı kaldığından da emin oluyoruz. Aile ağacını tamamladıktan sonra, her zaman resim, metin ve tasarımı kendi tercihlerinize göre değiştirebilir ve yayınlanmaya hazır hale getirebilirsiniz! Bu aile şecere tasarımı ile hemen başlamak ister misiniz? JSON dosyalarını ücretsiz olarak indirebilir ve yaptığınız web sitesine ekleyebilirsiniz!
Haydi Yapalım şunu. Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
YouTube kanalımıza abone olun
Konumlandırma Aile üyeleri, oluşturmaya başlamak için mesafenin yeni bir bölümünü ekler! Yapmamız gereken ilk şey, üzerinde çalıştığımız sayfaya yeni bir düzenli parça eklemek. Bölüm ayarlarını açın ve özellikle ViewPort genişliğini kullanarak bazı üst ve alt rulmanlar ekleyin.
Üst Dolgu: 8VW
Dolgu Alt: 8VW
Sıra #1 sütun yapısı ekle Aşağıdaki sütun yapısını kullanarak ilk satırı ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın bölüm ve ekranın tüm genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Mesafe Satırın sol ve sağ taraflarına masaüstüne boşluk eklemek için masaüstüne, ViewPort geniş birimini kullanarak bir sol ve sağ dolgu özelliği ekleyeceğiz. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sol dolgu: 15VW (masaüstü), 0vw (tablet ve cep telefonu)
Sağ dolgu: 15VW (masaüstü), 0vw (tablet ve cep telefonu)
Görüntü Modülünü Ekleyin Yükleme sütununa, Modülü eklemeye başlama zamanıdır! İhtiyacımız olan ilk şey bir görüntü modülü. Görüntüleri genişlik ve yükseklik ‘180px’ ‘ile yükleyin, ardından başlık, tasarım sekmesini açın ve görüntü seviyesini değiştirin. Görüntü Uygulama: Orta Yapıştırıcı Bir sonraki boyut ayarlarını değiştirin.
Genişlik:% 49 Modül hizalaması: merkez
Sınır ayarındaki her köşeye bir yükseklik değeri ekleyerek sınır ve görüntüyü bir daire olarak değiştirin. ’20VW’ kullanıyoruz, ancak istediğiniz yüksek numarayı kullanabilirsiniz.
Metin modülünü artı sütuna bir sonraki modüle, metin modülüne ekleyin. Aile üyesinin adını buraya ekleyin. Arka plan rengi daha sonra, arka plan ayarını girin ve arka plan rengini beyaz olarak değiştirin. Arka plan rengi: #ffffff Metin Ayarları Sonraki metin ayarlarını değiştirir. Aile şecere için bir görünüm ve diğer nüanslar yaratmak istiyorsanız, lütfen bu ortamla oynayın.
Metin yazı tipi: SANS’ı aç Metin rengi: #000000
Metin Boyutu: 0.8VW (masaüstü), 1.2vw (tablet), 1.9vw (telefon)
Hat yüksekliği metni: 0.4EM
Metin Oryantasyonu: Orta
Uzakta uzay ayarlarına geçin ve bazı marj değerleri ve özel dolgu ekleyin. Bu değerler metin modülünü oluşturmamıza ve görüntü modülüyle biraz örtüşmemize yardımcı olacaktır.
Üst Marj: -0.5VW Sol kenar boşluğu: 1VW
Doğru marj: 1VW
Üst Dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon)
Aşağıda dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon)
Sınır ayarlarına taşınır ve üst sınırlar da ekleyin.
Üst sınır genişliği: 5px Üst sınır rengi: #000000
Sayfada derinlik yaratmak için kutunun gölgesi ile birlikte gölgesi.
Dikey Konum Gölge Kutusu: 10px Bulanık Güç Gölgesi Kutusu: 50 Piksel Gölge Rengi: RGBA (0.0,0,0.17)
Dizin Z Metin modülünün görüntü modülünün üzerinde kalmasını sağlamak için, metin modülünün görünürlük ayarlarındaki z index’ini artıracağız.
Dizin Z: 2
Klon satırı, ilk satırı yapmayı bitirdikten ve içindeki tüm modülleri değiştirdikten üç kez, devam edebilir ve satırı üç kez klonlayabilirsiniz. Bu, yaklaşan öğretici adımlarda zamandan tasarruf etmemize yardımcı olacaktır. Bu çizgilerin her biri aile ağacında farklı bir seviye yapmak için kullanılacaktır.
Sütunumuzun ana öğesi, satır sütununun ana öğesine aşağıdaki CSS kodu satırını ekleyerek sütunu 4 kutu sütunlu bir kutuya dönüştürür: ekran: ızgara;
Izgara-TEMPLATE sütunları: Tekrar (4,%25); Bu yaklaşımı kullanmamızın nedeni, mevcut satır sütunlarının yapısını 4 sütunla seçmek yerine, her şeyin daha küçük bir ekran boyutunda% 100 duyarlı kalmasını istiyoruz. İkinci modülün #3 klonunu üçüncü sıra! Her modülü bir kez klonlamak. Daha sonra sütunun ana öğesi, sütunun ana öğesine aşağıdaki CSS kod satırını ekleyin: ekran: ızgara; Izgara-TEMPLATE sütunları: Tekrar (2,%50);
Satır #4 satır alanını bir sonraki ve son satıra ayarlayın! Burada yapmamız gereken tek şey, hattın dolgu değerini değiştirmek. Üst dolgu: 0px Aşağıda dolgu: 0px
Sol dolgu: 31vw Doğru dolgu: 31vw
Görüntü modülünü kullanarak aile üyelerini bağlama Satır #1 sütun yapısı ekle şimdi tüm aile üyelerini topladık, bunları bağlamaya başlayabiliriz! Bunu yapmak için birinci ve ikinci satırlar arasında yeni çizgiler ekleyin.
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut değerini değiştirin.
Genişlik:% 100
Maksimum genişlik:% 100 Bir sonraki boşluk aralığını açın ve bazı özel dolgu değerleri ekleyin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sol dolgu: 15VW (masaüstü), 0vw (tablet ve cep telefonu) Sağ dolgu: 15VW (masaüstü), 0vw (tablet ve cep telefonu)
Resim modülünü resim yükleme sütununa daha sonra ekleyin, resim modülünü ekleyin ve bu yazının başında indirdiğiniz klasörde bulabileceğiniz bir illüstrasyon yüklemesi.
Yapıştırıcı Görüntü modülünün boyut ayarlarını açın ve ‘zorla tam genişlik’ seçeneğini etkinleştirin.
Tam geniş zorla: Evet
Mesafe Uzay ayarlarındaki ‘Görüntünün altındaki görüntüleme alanını’ devre dışı bıraktığınızdan emin olun. Resmin altındaki boşluklar: iki kez klonlara ek olarak değil ve içindeki satırları ve görüntü modüllerini değiştirmeyi bitirdikten sonra konumunu değiştirin, devam edin ve iki kez klonlayın. Uygun kopyayı yerleştirin: Çizgi #1 Klon Görüntü Modülünü Ayarla Birinci sıraya üç kez ve 3 kez modül klonu.
Sütunun ana öğesi Bu görüntü modülünü, satır sütununun ana öğesine aşağıdaki CSS kod satırı ekleyerek 4 kutu sütunlu bir kutuya yerleştirin: ekran: ızgara; Izgara-TEMPLATE sütunları: Tekrar (4,%25);
Hat #2 Klon Görüntü Modülleri Ayarla İkinci sıraya ve görüntü modülünün klonuna bir kez hareket edin. Sütunun ana öğesi, satır sütununun ana öğesine aşağıdaki CSS kodu satırını ekleyerek iki modülü iki kutu sütunu ile kutuya yerleştirir: ekran: ızgara; Izgara-TEMPLATE sütunları: Tekrar (2,%50); Hat #3 Ayarla Alanı bir sonraki olarak değiştirin ve son olarak kopya. Burada, yapmanız gereken tek şey özel dolgu değerini değiştirmek ve tamamlamak!
Üst dolgu: 0px Aşağıda dolgu: 0px Sol dolgu: 27vw
Doğru dolgu: 27vw Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Bu yazıdaki son zihin, size Divi ile modern bir aile ağacının nasıl yapılacağını gösterdik! Yeniden yaptırdığımız aile ağacı tüm ekran boyutlarında harika görünüyor. Bu öğreticinin başında, JSON dosyalarını ücretsiz olarak indirebilir ve hemen başlayabilirsiniz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
YouTube kanalımıza abone olun
Konumlandırma Aile üyeleri, oluşturmaya başlamak için mesafenin yeni bir bölümünü ekler! Yapmamız gereken ilk şey, üzerinde çalıştığımız sayfaya yeni bir düzenli parça eklemek. Bölüm ayarlarını açın ve özellikle ViewPort genişliğini kullanarak bazı üst ve alt rulmanlar ekleyin.
Üst Dolgu: 8VW
Dolgu Alt: 8VW
Sıra #1 sütun yapısı ekle Aşağıdaki sütun yapısını kullanarak ilk satırı ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın bölüm ve ekranın tüm genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Mesafe Satırın sol ve sağ taraflarına masaüstüne boşluk eklemek için masaüstüne, ViewPort geniş birimini kullanarak bir sol ve sağ dolgu özelliği ekleyeceğiz. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sol dolgu: 15VW (masaüstü), 0vw (tablet ve cep telefonu)
Sağ dolgu: 15VW (masaüstü), 0vw (tablet ve cep telefonu)
Görüntü Modülünü Ekleyin Yükleme sütununa, Modülü eklemeye başlama zamanıdır! İhtiyacımız olan ilk şey bir görüntü modülü. Görüntüleri genişlik ve yükseklik ‘180px’ ‘ile yükleyin, ardından başlık, tasarım sekmesini açın ve görüntü seviyesini değiştirin. Görüntü Uygulama: Orta Yapıştırıcı Bir sonraki boyut ayarlarını değiştirin.
Genişlik:% 49 Modül hizalaması: merkez
Sınır ayarındaki her köşeye bir yükseklik değeri ekleyerek sınır ve görüntüyü bir daire olarak değiştirin. ’20VW’ kullanıyoruz, ancak istediğiniz yüksek numarayı kullanabilirsiniz.
Metin modülünü artı sütuna bir sonraki modüle, metin modülüne ekleyin. Aile üyesinin adını buraya ekleyin. Arka plan rengi daha sonra, arka plan ayarını girin ve arka plan rengini beyaz olarak değiştirin. Arka plan rengi: #ffffff Metin Ayarları Sonraki metin ayarlarını değiştirir. Aile şecere için bir görünüm ve diğer nüanslar yaratmak istiyorsanız, lütfen bu ortamla oynayın.
Metin yazı tipi: SANS’ı aç Metin rengi: #000000
Metin Boyutu: 0.8VW (masaüstü), 1.2vw (tablet), 1.9vw (telefon)
Hat yüksekliği metni: 0.4EM
Metin Oryantasyonu: Orta
Uzakta uzay ayarlarına geçin ve bazı marj değerleri ve özel dolgu ekleyin. Bu değerler metin modülünü oluşturmamıza ve görüntü modülüyle biraz örtüşmemize yardımcı olacaktır.
Üst Marj: -0.5VW Sol kenar boşluğu: 1VW
Doğru marj: 1VW
Üst Dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon)
Aşağıda dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon)
Sınır ayarlarına taşınır ve üst sınırlar da ekleyin.
Üst sınır genişliği: 5px Üst sınır rengi: #000000
Sayfada derinlik yaratmak için kutunun gölgesi ile birlikte gölgesi.
Dikey Konum Gölge Kutusu: 10px Bulanık Güç Gölgesi Kutusu: 50 Piksel Gölge Rengi: RGBA (0.0,0,0.17)
Dizin Z Metin modülünün görüntü modülünün üzerinde kalmasını sağlamak için, metin modülünün görünürlük ayarlarındaki z index’ini artıracağız.
Dizin Z: 2
Klon satırı, ilk satırı yapmayı bitirdikten ve içindeki tüm modülleri değiştirdikten üç kez, devam edebilir ve satırı üç kez klonlayabilirsiniz. Bu, yaklaşan öğretici adımlarda zamandan tasarruf etmemize yardımcı olacaktır. Bu çizgilerin her biri aile ağacında farklı bir seviye yapmak için kullanılacaktır.
İkinci modülün #1 klonunu 7 kez ayarlayın, Aile Şecere’nin ilk seviyesini ayarlamaya başlayalım! Tel çerçeve moduna dönüp iki modülü sıranızda 7 kez klonlamak. Bittiğinde, arka uç satırınız şöyle görünecektir:
CSS Sütunumuzun ana öğesi tüm sütunu bir kutu haline getirir. Toplamda, sütununuzda 16 modül olmalıdır. Bu 16 modülü 8 ızgara sütuna koyacağız. Bu, 8 ızgara sütununun her birinin 2 modül içereceği anlamına gelir; Bir görüntü modülü ve bir metin modülü. İlk satır ayarlarını açın ve sütunun ana öğesine aşağıdaki CSS kod satırını ekleyin:
Sütunumuzun ana öğesi, satır sütununun ana öğesine aşağıdaki CSS kodu satırını ekleyerek sütunu 4 kutu sütunlu bir kutuya dönüştürür: ekran: ızgara;
Izgara-TEMPLATE sütunları: Tekrar (4,%25); Bu yaklaşımı kullanmamızın nedeni, mevcut satır sütunlarının yapısını 4 sütunla seçmek yerine, her şeyin daha küçük bir ekran boyutunda% 100 duyarlı kalmasını istiyoruz. İkinci modülün #3 klonunu üçüncü sıra! Her modülü bir kez klonlamak. Daha sonra sütunun ana öğesi, sütunun ana öğesine aşağıdaki CSS kod satırını ekleyin: ekran: ızgara; Izgara-TEMPLATE sütunları: Tekrar (2,%50);
Satır #4 satır alanını bir sonraki ve son satıra ayarlayın! Burada yapmamız gereken tek şey, hattın dolgu değerini değiştirmek. Üst dolgu: 0px Aşağıda dolgu: 0px
Sol dolgu: 31vw Doğru dolgu: 31vw
Görüntü modülünü kullanarak aile üyelerini bağlama Satır #1 sütun yapısı ekle şimdi tüm aile üyelerini topladık, bunları bağlamaya başlayabiliriz! Bunu yapmak için birinci ve ikinci satırlar arasında yeni çizgiler ekleyin.
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut değerini değiştirin.
Genişlik:% 100
Maksimum genişlik:% 100 Bir sonraki boşluk aralığını açın ve bazı özel dolgu değerleri ekleyin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sol dolgu: 15VW (masaüstü), 0vw (tablet ve cep telefonu) Sağ dolgu: 15VW (masaüstü), 0vw (tablet ve cep telefonu)
Resim modülünü resim yükleme sütununa daha sonra ekleyin, resim modülünü ekleyin ve bu yazının başında indirdiğiniz klasörde bulabileceğiniz bir illüstrasyon yüklemesi.
Yapıştırıcı Görüntü modülünün boyut ayarlarını açın ve ‘zorla tam genişlik’ seçeneğini etkinleştirin.
Tam geniş zorla: Evet
Mesafe Uzay ayarlarındaki ‘Görüntünün altındaki görüntüleme alanını’ devre dışı bıraktığınızdan emin olun. Resmin altındaki boşluklar: iki kez klonlara ek olarak değil ve içindeki satırları ve görüntü modüllerini değiştirmeyi bitirdikten sonra konumunu değiştirin, devam edin ve iki kez klonlayın. Uygun kopyayı yerleştirin: Çizgi #1 Klon Görüntü Modülünü Ayarla Birinci sıraya üç kez ve 3 kez modül klonu.
Sütunun ana öğesi Bu görüntü modülünü, satır sütununun ana öğesine aşağıdaki CSS kod satırı ekleyerek 4 kutu sütunlu bir kutuya yerleştirin: ekran: ızgara; Izgara-TEMPLATE sütunları: Tekrar (4,%25);
Hat #2 Klon Görüntü Modülleri Ayarla İkinci sıraya ve görüntü modülünün klonuna bir kez hareket edin. Sütunun ana öğesi, satır sütununun ana öğesine aşağıdaki CSS kodu satırını ekleyerek iki modülü iki kutu sütunu ile kutuya yerleştirir: ekran: ızgara; Izgara-TEMPLATE sütunları: Tekrar (2,%50); Hat #3 Ayarla Alanı bir sonraki olarak değiştirin ve son olarak kopya. Burada, yapmanız gereken tek şey özel dolgu değerini değiştirmek ve tamamlamak!
Üst dolgu: 0px Aşağıda dolgu: 0px Sol dolgu: 27vw
Doğru dolgu: 27vw Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Bu yazıdaki son zihin, size Divi ile modern bir aile ağacının nasıl yapılacağını gösterdik! Yeniden yaptırdığımız aile ağacı tüm ekran boyutlarında harika görünüyor. Bu öğreticinin başında, JSON dosyalarını ücretsiz olarak indirebilir ve hemen başlayabilirsiniz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
