Ana İçeriğe Geç

Divi üzerine geldiğinde katlanabilir bölümler nasıl oluşturulur?

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Divi'nin yeni taşınabilir boyutlandırma seçeneklerini kullanmak, yalnızca son derece duyarlı (duyarlı) web siteleri oluşturmamıza yardımcı olmakla kalmaz, aynı zamanda benzersiz etkileşimler yaratır. Bu seçenekleri kullanarak, oluşturduğunuz herhangi bir web sitesini özelleştirebilir ve sayfa yapınızı mevcut tasarım trendlerine göre özelleştirebilirsiniz.

Bu eğitimde, özellikle, 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örüntülenmesine 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çmış olduğunuz bölüm otomatik olarak kapatılacaktır. Genel yaklaşımı açıklayarak başlayacağız ve aşağıda sıfırdan görebileceğiniz örneği yeniden oluşturarak devam edeceğiz. Bu eğitimin sizi kendi üzerine gelme bölümü tasarımlarınızı oluşturmaya teşvik etmesini umuyoruz!

Gidelim!

anket

Öğreticiye dalmadan önce, sonuca hızla bir göz atalım.

Tasarım önizleme divi bölümü

Tasarım aşaması

Eğiticiye dalmadan önce, geçiş bölümleri oluşturmak için kullanılan tekniğin üzerinden geçeceğiz. Bu tekniği, herhangi bir stille, oluşturduğunuz her tür web sitesine uygulayabilirsiniz.

1. İlk bölümü sayfanıza ekleyin

Yepyeni bir sayfada yeni bir tasarıma başladığınızı varsayalım. Yapılacak ilk şey, yeni bir normal bölüm eklemektir.

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

Ardından, bölümünüzün başlığını içeren bir metin modülü içeren yeni bir satır ekleyerek devam edebilirsiniz. Ayrıca bir ayırıcı modül ve üzerine gelindiğinde veya dokunulduğunda çizginin açıldığını gösteren bir şey ekleyebilirsiniz. Bölüm başlığını bölüm içeriğinin geri kalanından ayırmak önemlidir. Bu nedenle, bölüm başlığı ile onu izleyen her şey arasında yeterince boşluk bıraktığınızdan emin olun.

3. Bölüm içeriğinin geri kalanını ayarlayın

Bölüm başlıklarını takip eden tasarım öğeleri tamamen size bağlıdır. Bir bölümü istediğiniz kadar uzun ya da kısa yapabilir ve istediğiniz tasarım stilini kullanabilirsiniz.

4. Varsayılan yükseklikleri değiştirin ve bölümün üzerine gelin

Bölümü ve tüm tasarım öğelerini iyileştirdikten sonra, rollover efektini yaratmanın zamanı geldi. Bölümünüzün varsayılan yüksekliği yalnızca bölüm başlığıyla eşleşecek şekilde tasarlanmıştır. Fareyle üzerine gelindiğinde, bölüm ilk boyutuna geri dönecektir.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

5. Dikey taşmayı gizle

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

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

Ziyaretçilerinizin takdir edeceği açık bir kullanıcı deneyimi oluşturmak için sayfanızın tüm bölümleri için aynı adımları tekrarlayın.

Tasarımın başlangıcı!

Yeni bölüm ekle

Varsayılan arka plan rengi

Artık bu yazının yaklaşımını takip ettiğimize göre, işleri eyleme geçirmeye başlama zamanı! WordPress web sitenizdeki yepyeni bir sayfaya düzenli bir ilk 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 bir renge değiştirin.

  • Arka plan rengi: # 000000

Parametreler divi bölümüArka plan renginin üzerinde uçun

Bu arka plan rengini değiştirerek değiştirin.

  • Arka plan rengi: #ffffff

Divi parametreleri bölümüSatır ekle 1

Sütun yapısı

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

Bir satır divi seçin

Metin modülü ekle

H2 içeriği ekle

Bir sonraki yeni satırınıza bir metin modülü ekleyin. Bölüm açıldığında '▼' sembollü bir H2 kopyası ekleyin.

Bölüm divi hakkındaSimge rengini değiştir

H2 metin ayarları

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

  • Başlık 2 Yazı Tipi: Trebuchet
  • Başlık 2 Yazı tipi 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: 100 piksel (masaüstü), 80 piksel (tablet), 60 piksel (telefon)
  • Başlık 2 Harf aralığı: -5px

Divi başlığını özelleştirin

Bölme modülü ekle

görünürlük

Bu satırda ihtiyacımız olan ikinci ve son modül bir bölme modülüdür. Görünürlük ayarlarında "Ayırıcıyı göster" seçeneğini etkinleştirdiğinizden emin olun.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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

Divi ayırıcısı ekleRenk

Ardından Tasarım sekmesine gidin ve ayırıcının rengini değiştirin.

  • Renk: #ff0f3b

Divi'ye bir bölücü ekleboyutlandırma

Ayrıca modülün boyutlandırma parametrelerini de değiştirin.

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

Ayırıcıyı özelleştirin

2 satırını ekle

Sütun yapısı

Sonraki sıra! Fareyle üzerine geldikten (masaüstü) veya tıkladıktan (tablet ve mobil) sonra görüntülemek 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ı gerektiği gibi özelleştirebileceğinizi unutmayın:

Bir divi çift sütunlu bölüm ekleyin

1 sütununa bir metin modülü ekleyin

İçerik ekle

İstediğiniz içeriğe sahip ilk sütuna bir metin modülü yerleştirin.

Divi metin kutusu ekleMetin ayarları

Metin modülünün Tasarım sekmesine gidin ve metnin yönünü değiştirin.

  • Metin yönü: Yasla

Divi metin parametresi

2 sütununa bir metin modülü ekleyin

İçerik ekle

Ayrıca, ikinci sütuna, seçtiğiniz içeriği içeren bir metin modülü ekleyin.

2. içerik bölgesi ekle

Metin ayarları

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

  • Metin yönü: Yasla

Divi metin parametresi

Boyutlandırma parametrelerini bölüme ekle

Varsayılan boyutlandırma

Bölümünüzü tamamladıktan sonra, fareyle üzerine gelme efekti oluşturma zamanı. Bölüm ayarlarını açın ve farklı ekran boyutları için maksimum yüksekliği değiştirin:

  • Maksimum yükseklik: 300px (masaüstü), 280px (tablet), 260px (telefon)

Divi oluşturucu boyutlandırma

gezinip

Ayrıca maksimum yükseklikte fareyle üzerine gelme seçeneğini açın ve ekran boyutundan bağımsız olarak tüm öğeleri kapsayacak kadar yüksek bir değer ekleyin. Bu değer, tüm öğelerinizin bölüm kabının başlangıç ​​boyutunu aşmadan görünmesini sağlar.

  • Maksimum yükseklik: 5000px

gezinip

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ın ötesine geçen tüm içeriği gizleyecektir.

  • Dikey taşma: gizli

Ekran ayarı

Geçişler

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

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

Geçiş ayarları

Tüm bölümü istediğiniz kadar klonlayın

İlk köprü bölümünü oluşturduktan sonra, istediğiniz kadar klonlayabilirsiniz.

Divi bölümlerini klonlaBölüm başlıklarını değiştir

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

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Divi bölüm değişikliği

H2 metninin renklerini değiştirme

Tasarımda varyasyonlar yaratmak için, aşağıdaki baskı ekranında vurgulanan modüllerin metin renklerini de değiştireceğiz.

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

Divi başlık renklerinin değiştirilmesi

Ayırıcının renklerini değiştirme

Metin modüllerine eşlik eden renklerle.

  • Renk: #c4c4c4

anket

Şimdi tüm adımlar tamamlandığında, sonuca bir göz atalım.

Divi tasarım önizlemesi

Son düşünceler

Bu makalede, 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. JSON dosyasını ücretsiz olarak da indirebilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum bıraktığınızdan emin olun.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
1 hisseleri
hisse1
cıvıltı
Enregistrer