Divi'nin Yeni Boyutlandırma ve Taşma Ayarlarıyla Vurgulu Bölümler Nasıl Oluşturulur

Divi'nin yeni sürüklenebilir boyutlandırma seçeneklerini kullanmak, yalnızca son derece duyarlı web siteleri oluşturmanıza yardımcı olmakla kalmaz, aynı zamanda benzersiz etkileşimler oluşturmanıza da gerçekten yardımcı olabilir. Bu seçeneklerle oynayarak, oluşturduğunuz herhangi bir web sitesini özelleştirebilir ve sayfa yapılarınızı mevcut tasarım trendlerini karşılayacak şekilde özelleştirebilirsiniz.

Bu öğreticide, özellikle, size Divi ile fareyle üzerine gelme bölümlerinin nasıl oluşturulacağını göstereceğiz. Yeni bir sayfa oluşturacağız ve tüm bölüm başlıklarının gösterilmesine izin vereceğiz, ancak her bölüm yalnızca fareyle üzerine gelindiğinde (masaüstü) veya tıklandığında (mobil) açılacaktır. Başka bir bölüm açar açmaz daha önce açtığınız bölüm otomatik olarak kapanacaktır. Genel yaklaşımı açıklayarak başlayacağız ve aşağıda görebileceğiniz örneği sıfırdan yeniden oluşturarak devam edeceğiz. Umarız bu eğitim sizi kendi vurgulu bölüm tasarımlarınızı yaratmaya teşvik eder!

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

Hover Bölümleri Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz vurgulu bölümleri düzenine 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!

Yaklaşmak

Asıl öğreticiye dalmadan önce, fareyle üzerine gelme bölümleri oluşturmak için kullanılan tekniği gözden geçireceğiz. Bu tekniği, oluşturduğunuz her tür web sitesine, herhangi bir tasarım stiliyle uygulayabilirsiniz.

1. Sayfanıza ilk bölümü ekleyin

Diyelim ki yepyeni bir sayfada yeni bir tasarıma başlıyorsunuz. Yapmanız gereken ilk şey, ona yeni bir normal bölüm eklemek.

2. Bölüm başlığı içeren yeni bir satır ekleyin

Ardından, bölüm başlığınızı içeren bir Metin Modülü ile yeni bir satır ekleyerek devam edebilirsiniz. Ayrıca bir bölücü modül ve satırın üzerine gelindiğinde veya dokunulduğunda genişlediğini gösteren bir şey de ekleyebilirsiniz (bu yazının önizlemesindeki örneğe bakın). Bölüm başlığını bölüm içeriğinin geri kalanından ayrı tutmak önemlidir, bu nedenle bölüm başlığı ile bundan sonra gelenler arasında yeterince boşluk bıraktığınızdan emin olun.

3. Bölüm içeriğinin geri kalanına ince ayar yapın (istediğiniz kadar satır ve modül ekleyin)

Bölüm başlıklarını takip eden tasarım öğeleri tamamen size kalmış. Bölümü istediğiniz kadar uzun veya kısa yapabilir ve her türlü tasarım stilinden yararlanabilirsiniz.

4. Bölümün varsayılan ve üzerine gelinen maksimum yüksekliğini değiştirin

Bölümün ve içindeki tüm tasarım öğelerinin ince ayarını yaptıktan sonra, fareyle üzerine gelme efektini oluşturmanın zamanı geldi. Bölümünüzün varsayılan yüksekliği yalnızca bölüm başlığına uyacak şekilde tasarlanmıştır. Fareyle üzerine gelindiğinde, bölüm ilk boyutunu geri alacaktır.

5. Dikey Taşmayı Gizleyin

Bu tekniğin bir diğer önemli kısmı da dikey taşmayı gizlemektir. Bölümünüz için, bölümün ilk yüksekliğinden daha küçük olan varsayılan bir maksimum yükseklik ayarladığınızda, bir taşma oluşturulacaktır. Taşmanın görünmediğinden emin olmak için bölümün görünürlük ayarlarında gizlendiğinden emin olmanız gerekir.

5. Sayfadaki tüm bölümler için adımları tekrarlayın

Ziyaretçilerinizin beğeneceği bariz bir kullanıcı deneyimi oluşturmak için sayfanızdaki tüm bölümler için aynı adımları tekrarlayın.

Youtube Kanalımıza Abone Olun

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Varsayılan Arka Plan Rengi

Artık bu yazının yaklaşımını gözden geçirdiğimize göre, işleri eyleme geçirmenin zamanı geldi! WordPress web sitenizdeki yepyeni bir sayfaya ilk normal bölümü ekleyin ve bölüm ayarlarını açın. Bölümünüzün varsayılan arka plan rengini istediğiniz renge değiştirin.

• Arka Plan Rengi: #000000

Vurgulu Arka Plan Rengi

Fareyle üzerine gelindiğinde bu arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

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:

Metin Modülü Ekle

H2 İçeriği Ekle

Sonraki satırınıza bir Metin Modülü ekleyin. Bir sonraki şeyin geleceğini belirten '▼' sembolüyle birlikte biraz H2 kopyası ekleyin.

H2 Metin Ayarları

Modülün tasarım sekmesine gidin ve H2 metin ayarlarını değiştirin.

• Başlık 2 Yazı Tipi: Trebuchet
• Başlık 2 Yazı Ağırlığı: Ultra Kalın
• Başlık 2 Metin Hizalama: Sol
• Başlık 2 Metin Rengi: #ff0f3b
• Başlık 2 Metin Boyutu: 100px (Masaüstü), 80px (Tablet), 60px (Telefon)
• Başlık 2 Harf Aralığı: -5px

Bölücü Modülü Ekle

görünürlük

Bu satırda ihtiyacımız olan ikinci ve son modül bir Bölücü Modüldür. Görünürlük ayarlarında 'Bölücüyü Göster' seçeneğini etkinleştirdiğinizden emin olun.

• Bölücüyü Göster: Evet

Renk

Ardından tasarım sekmesine geçin ve ayırıcı rengini değiştirin.

• Renk: #ff0f3b

boyutlandırma

Modülün boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 2px
• Genişlik: %14

2. Satır Ekle

Sütun Yapısı

Bir sonraki sıraya! Fareyle üzerine geldikten (masaüstü) veya tıkladıktan (tablet ve mobil) sonra görünmesini istediğiniz tüm içeriği yerleştirmeniz gereken yer burasıdır. Aşağıdaki sütun yapısını kullanıyoruz, ancak istediğiniz kadar satır ve modül ekleyebileceğinizi ve bunları ihtiyaçlarınıza göre şekillendirebileceğinizi unutmayın:

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

İlk sütuna seçtiğiniz içeriğin bulunduğu bir Metin Modülü yerleştirin.

Metin Ayarları

Metin Modülünün tasarım sekmesine gidin ve metin yönünü değiştirin.

• Metin Yönü: Yasla

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

İçerik Ekle

Seçtiğiniz bazı içerikle birlikte ikinci sütuna bir Metin Modülü ekleyin.

Metin Ayarları

Yine, modülün metin ayarlarında metin yönünü değiştirin.

• Metin Yönü: Yasla

Bölüme Boyutlandırma Ayarları Ekle

Varsayılan Boyutlandırma

Bölümünüzü tamamladıktan sonra, fareyle üzerine gelme efektini gerçekleştirmenin zamanı geldi. Bölüm ayarlarını açın ve farklı ekran boyutlarında maksimum yüksekliği değiştirin:

• Maks. Yükseklik: 300px (Masaüstü), 280px (Tablet), 260px (Telefon)

Hover Boyutlandırma

Maksimum yükseklikte de fareyle üzerine gelme seçeneğini etkinleştirin ve farklı ekran boyutlarındaki tüm öğeleri kapsayacak kadar yüksek bir değer ekleyin. Bu değer, bölüm kabının başlangıç ​​boyutunu aşmadan tüm öğelerinizin görünmesini sağlar.

• Maksimum Yükseklik: 5000 piksel

Dikey Taşma

Ardından, bölümün gelişmiş sekmesine gidin ve dikey taşmayı değiştirin. Bu, bölüm kapsayıcısını aşan tüm içeriği gizleyecektir.

• Dikey Taşma: Gizli

geçişler

Sorunsuz bir geçiş oluşturmak için gelişmiş sekmesindeki geçiş ayarlarını da değiştiriyoruz.

• Geçiş Süresi: 800ms
• Geçiş Gecikmesi: 500ms

Tüm Bölümü İstediğiniz Kadar Kez Klonlayın

İlk vurgulu bölümü oluşturmayı tamamladığınızda, istediğiniz kadar klonlayabilirsiniz.

Bölüm Başlıklarını Değiştir

Elbette kopyaların bölüm başlıklarını değiştirmek isteyeceksiniz.

H2 Metin Renklerini Değiştir

Tasarımda biraz çeşitlilik yaratmak için, aşağıdaki yazdırma ekranında vurgulanan modüllerin metin renklerini de değiştireceğiz.

• Başlık 2 Metin Rengi: #c4c4c4

Bölücü Renklerini Değiştir

Metin Modüllerine eşlik eden ayırıcı renklerle birlikte.

• Renk: #c4c4c4

Ö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 gönderide, oluşturduğunuz herhangi bir web sitesinde fareyle üzerine gelme bölümlerini kullanarak benzersiz etkileşimler oluşturmak için Divi'nin yeni sürüklenebilir boyutlandırma seçeneklerini yaratıcı bir şekilde nasıl kullanacağınızı gösterdik. Yaklaşımı açıklayarak başladık ve tasarım örneğini sıfırdan yeniden oluşturarak devam ettik. Ayrıca JSON dosyasını ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.