Divi'nin Dönüştürme Ayarlarıyla Bir Aile Ağacı Nasıl Oluşturulur

Hiç web siteniz için bir soy ağacı oluşturmaya çalıştınız, ancak buna nasıl yaklaşacağınızı tam olarak bilmiyor muydunuz? Pekala, bugünün Divi eğitiminde, size bunu tam olarak nasıl yapacağınızı göstereceğiz. Soy ağacını oluşturmanın yanı sıra, tüm ekran boyutlarında duyarlı kalmasını da sağlıyoruz. Soy ağacını oluşturmayı tamamladığınızda, görüntüleri, metinleri ve tasarımı her zaman kendi tercihinize göre değiştirebilecek ve yayına hazır hale getirebileceksiniz! Bu aile ağacı tasarımına hemen başlamak ister misiniz? JSON dosyasını ücretsiz olarak indirebilecek ve oluşturduğunuz herhangi bir web sitesine ekleyebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Aile Ağacı Düzenini ÜCRETSİZ indirin

Ücretsiz aile ağacı düzenine 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 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!

Youtube Kanalımıza Abone Olun

Aile Üyelerini Konumlandırma

Yeni Bölüm Ekle

aralık

Haydi yaratmaya başlayalım! Yapmamız gereken ilk şey, üzerinde çalıştığımız sayfaya yeni bir normal bölüm eklemek. Bölüm ayarlarını açın ve görünüm alanı genişliğini kullanarak bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 8vw
• Alt Dolgu: 8vw

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak ilk satırı bölümünüze ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın, bölümün ve ekranın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Masaüstünde satırın soluna ve sağına boşluk eklemek için, görüntü alanı genişlik birimini kullanarak bazı özel sol ve sağ dolgu ekleyeceğiz.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: 15vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Doldurma: 15vw (Masaüstü), 0vw (Tablet ve Telefon)

Sütuna Resim Modülü Ekle

Fotoğraf yükleniyor

Modül eklemeye başlama zamanı! İlk ihtiyacımız olan bir Görüntü Modülü. Genişliği ve yüksekliği '180px' olan bir resim yükleyin.

hizalama

Ardından tasarım sekmesine gidin ve görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Genişlik: %49
• Modül Hizalaması: Merkez

Sınır

Ve kenarlık ayarlarında köşelerin her birine yüksek bir değer ekleyerek resmi daire haline getirin. '20vw' kullanıyoruz, ancak istediğiniz herhangi bir yüksek sayıyı kullanabilirsiniz.

Sütuna Metin Modülü Ekle

İçerik Ekle

Bir Metin Modülü olan bir sonraki modüle geçin. Aile üyesinin adını buraya ekleyin.

Arka plan rengi

Ardından, arka plan ayarlarına gidin ve arka plan rengini beyaz olarak değiştirin.

• Arka Plan Rengi: #ffffff

Metin Ayarları

Sonraki metin ayarlarını değiştirin. Soy ağacı için başka bir görünüm ve his yaratmak istiyorsanız, bu ayarlarla oynamaktan çekinmeyin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #000000
• Metin Boyutu: 0.8vw (Masaüstü), 1.2vw (Tablet), 1.9vw (Telefon)
• Metin Satırı Yüksekliği: 0.4em
• Metin Yönü: Merkez

aralık

Aralık ayarlarına geçin ve bazı özel kenar boşluğu ve dolgu değerleri ekleyin. Bu değerler, Metin Modülünü şekillendirmemize ve Görüntü Modülü ile biraz örtüşmesine yardımcı olacaktır.

• Üst Marj: -0.5vw
• Sol Kenar Boşluğu: 1vw
• Sağ Marj: 1vw
• Üst Dolgu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)
• Alt Dolgu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)

Sınır

Kenarlık ayarlarına geçin ve bir üst kenarlık da ekleyin.

• Üst Kenar Genişliği: 5px
• Üst Kenar Rengi: #000000

Kutu Gölge

Sayfada derinlik yaratmak için bir Kutu Gölgesi ile birlikte.

• Kutu Gölge Dikey Konumu: 10px
• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.17)

Z İndeksi

Metin Modülünün Görüntü Modülünün üstünde kalmasını sağlamak için Metin Modülünün görünürlük ayarlarında Z indeksini artıracağız.

• Z indeksi: 2

Satırı Üç Kez Klonla

İlk satırı oluşturmayı ve içindeki tüm modülleri değiştirmeyi bitirdikten sonra, devam edip satırı üç kez klonlayabilirsiniz. Bu, öğreticinin sonraki adımlarında zaman kazanmamıza yardımcı olacaktır. Bu satırların her biri, soy ağacında farklı bir seviye oluşturmak için kullanılacaktır.

1. Satırı Özelleştir

Her İki Modülü 7 Kez Klonlayın

Soy ağacının ilk seviyesini özelleştirmeye başlayalım! Tel kafes moduna geçin ve sıranızdaki iki modülü 7 kez klonlayın. İşiniz bittiğinde, sıranızın arka ucu şöyle görünmelidir:

Sütun Ana Öğe CSS

Tüm sütunu bir ızgaraya dönüştürüyoruz. Toplamda, sütununuzda 16 modül olmalıdır. Bu 16 modülü 8 grid sütununa yerleştireceğiz. 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ın satır ayarlarını açın ve aşağıdaki CSS kodu satırlarını sütun ana öğesine ekleyin:

display: grid;
grid-template-columns: repeat(8, 12.5%);

2. Satırı Özelleştir

Her İki Modülü 3 Kez Klonla

İkinci sıraya! Burada her iki modülü de 3 kez klonlayacağız.

Sütun Ana Elemanı

Satırın sütun ana öğesine aşağıdaki CSS kod satırlarını ekleyerek sütunu 4 ızgara sütunlu bir ızgaraya dönüştürüyoruz:

display: grid;
grid-template-columns: repeat(4, 25%);

4 sütunlu mevcut bir satır sütun yapısını seçmek yerine bu yaklaşımı kullanmamızın nedeni, her şeyin daha küçük ekran boyutlarında %100 duyarlı kalmasını istememizdir.

3. Satırı Özelleştir

Her İki Modülü de Klonla

Üçüncü sıraya! Modüllerin her birini bir kez klonlayın.

Sütun Ana Elemanı

Ardından, sütun ana öğesine aşağıdaki CSS kodu satırlarını ekleyin:

display: grid;
grid-template-columns: repeat(2, 50%);

4. Sırayı Özelleştir

Satır Aralığı

Bir sonraki ve son sıraya! Burada yapmamız gereken tek şey satır doldurma değerlerini değiştirmek.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: 31vw
• Sağ Dolgu: 31vw

Görüntü Modüllerini Kullanarak Aile Üyelerini Bağlama

1. Satır Ekle

Sütun Yapısı

Artık tüm aile üyelerini sıraya koyduğumuza göre, onları bağlamaya başlayabiliriz! Bunu yapmak için, birinci ve ikinci sıra arasına yeni bir satır ekleyin.

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma değerlerini değiştirin.

• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki boşluk ayarlarına gidin ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: 15vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Doldurma: 15vw (Masaüstü), 0vw (Tablet ve Telefon)

Sütuna Resim Modülü Ekle

İllüstrasyon Yükle

Ardından, bir Görüntü Modülü ekleyin ve bu yazının başında indirdiğiniz klasörde bulabileceğiniz resmi yükleyin.

boyutlandırma

Görüntü Modülünün boyutlandırma ayarlarına gidin ve 'Tam Genişliğe Zorla' seçeneğini etkinleştirin.

• Tam Genişliği Zorla: Evet

aralık

Boşluk ayarlarında 'Görüntünün Altındaki Boşluğu Göster' seçeneğini devre dışı bıraktığınızdan emin olun.

• Resmin Altındaki Boşluğu Göster: Hayır

Satırı İki Kez Klonla ve Konumlarını Değiştir

Satırı ve içindeki Görüntü Modülünü değiştirmeyi bitirdikten sonra devam edin ve iki kez klonlayın. Kopyaları buna göre yerleştirin:

1. Satırı Özelleştir

Görüntü Modülünü Üç Kez Klonla

İlk satıra geri dönün ve modülü 3 kez klonlayın.

Sütun Ana Elemanı

Satırın sütun ana öğesine aşağıdaki CSS kodu satırlarını ekleyerek bu Görüntü Modüllerini 4 ızgara sütunlu bir ızgaraya yerleştirin:

display: grid;
grid-template-columns: repeat(4, 25%);

2. Satırı Özelleştir

Klon Görüntü Modülü

İkinci sıraya geçin ve Görüntü Modülünü bir kez klonlayın.

Sütun Ana Elemanı

Satırın sütun ana öğesine aşağıdaki CSS kod satırlarını ekleyerek her iki modülü de iki ızgara sütunlu bir ızgaraya yerleştirin:

display: grid;
grid-template-columns: repeat(2, 50%);

3. Satırı Özelleştir

Aralığı Değiştir

Bir sonraki ve son kopyaya. Burada yapmanız gereken tek şey özel dolgu değerlerini değiştirmek ve işiniz bitti!

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: 27vw
• Sağ Dolgu: 27vw

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu yazıda size Divi ile nasıl modern bir soy ağacı oluşturacağınızı gösterdik! Yeniden oluşturduğumuz aile ağacı, tüm ekran boyutlarında harika görünüyor. Bu öğreticinin başında, JSON dosyasını ücretsiz olarak indirebilir ve hemen kullanmaya başlayabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!