Divi Shop modülünü mobil cihazlarda dinamik ürün haritalarına dönüştürün

Divi Shop modülünü mobil cihazlarda dinamik ürün haritalarına dönüştürün

İster yeni bir lansman isterse de hazırladığınız bir satış olsun, belirli ürünler için bir açılış sayfası oluşturduğunuzda, bir noktada Mağaza modülünü kullanma şansınız yüksektir. Divi'nin Mağaza modülü, ürünleri WooCommerce eklentisinden dinamik olarak çıkarmanıza ve Divi'nin yerleşik seçeneklerini kullanarak bunları şekillendirmenize olanak tanır. 

Şimdi varsayılan olarak mağaza modülü, tümü daha küçük ekran boyutlarında iki sütuna çevrilen birkaç sütun yapısı ile birlikte gelir. Bu, göstermeyi ne kadar çok ürün seçerseniz, açılış sayfanızın bir sonraki bölümüne geçmek için o kadar çok dikey kaydırma yapmanız gerektiği anlamına gelir.

Modern web tasarımında, ziyaretçilerinizin tercihlerine göre dikey kaydırma ve görüntüleme öğelerini sınırlandırmak için sıklıkla kullanılan bir teknik, manyetik kartlar kullanmaktır. Bu eğiticide, Divi mağaza modülünü bir eklenti kullanmadan daha küçük ekran boyutlarında dinamik ürün haritalarına nasıl dönüştüreceğinizi göstereceğiz. 

Ürün bölümümüzün farklı unsurlarını hazırlayarak başlayacağız ve süpürme efektini etkinleştirmek için az miktarda CSS kodu kullanacağız. Açılış sayfanızda ziyaretçilerinizi bunaltmadan geniş bir ürün yelpazesini göstermenin harika bir yoludur. 

Olası Sonuç

Öğreticiye dalmadan önce sonuca bir göz atalım. Ürünün manyetik kartlarını yalnızca tablet ve cep telefonlarında etkinleştiriyoruz. Masaüstünde Mağaza modülünde belirlediğimiz kolon yapısını koruyoruz.

Divi ürün modülü mağaza animasyonu

1. WooCommerce ve ürün sayfalarını yapılandırın

Bu eğitimin Divi kısmına girmeden önce, WooCommerce eklentisinin web sitenize yüklenmesi ve etkinleştirilmesi önemlidir. Henüz yapmadıysanız, Mağaza modülünüzde sergilemek istediğiniz ürün sayısına bağlı olarak birden fazla ürün ekleyin.

Woocommerce ürünleri oluşturun

2. Yeni bir sayfa oluşturun ve kırtasiye sayfası düzenini indirin

Yeni bir sayfa oluştur

Ürünler yerleştirildikten sonra, WordPress arka ucunuza yeni bir sayfa ekleyin. Sayfanıza bir başlık verin, sayfayı yayınlayın ve Divi Görsel Oluşturucu'yu etkinleştirin.

Bir divi sayfası oluşturun
Yeni bir divi sayfası oluştur

Açılış sayfası düzenini indirin

Yeni sayfanıza girdikten sonra, önceden belirlenmiş düzenlerinize gidin ve kırtasiye açılış sayfası düzenini indirin. Bu özel düzeni kullanmamıza rağmen, bu düzen içine bir mağaza modülü eklediğiniz veya bu düzeni bulduğunuz sürece, istediğiniz başka bir düzeni kullanmakta özgürsünüz.

Bir divi düzeni seçin

3. Mağaza bölümünü değiştirin

Mağaza modülü ile bölümü bulun

Kırtasiye ana sayfa düzenini kullanarak oluşturduğumuz yeni sayfamıza inersek karşımıza mağaza modülü olan bir bölüm çıkıyor. Bu bölümü, bu eğitimin sonraki adımlarında kullanacağız.

Mağaza modülünü bulun

Satır Parametreleri

Duyarlı boyutlandırma

Mağaza modülünü içeren satırın satır ayarlarını açarak başlayın. Daha önce de belirtildiği gibi aynı tasarımı masaüstünde tutuyoruz, ürünün kaydırmalı kartlarını yalnızca daha küçük ekran boyutlarında etkinleştireceğiz. 

Zahmetsiz bir deneyim yaratmak için, boyutlandırma ayarlarındaki genişliği değiştirerek satırın ekranımızın sol ve sağ taraflarına dokunmasına izin vereceğiz.

  • Özel bir oluk genişliği kullanın: 1
  • Genişlik:% 80 (masaüstü),% 100 (tablet ve telefon)
Duyarlı tasarım değişikliği

görünürlük

Ayrıca, görünürlük ayarlarını gizli olarak ayarlayarak hiçbir şeyin satır kabının ötesine geçmemesini sağlayacağız.

  • Yatay taşma: gizli
  • Dikey taşma: gizli
Divi görünürlük yapılandırması

Mağaza modülü ayarları

Seçtiğiniz ürün sayısını ve ofis sütun yapısını seçin

Ardından, Mağaza modülü ayarlarını açacağız. CSS kodumuzda yaptığımız değişiklikler (daha sonra ekleyeceğiz), gösterdiğimiz ürün sayısına bağlıdır. 

Size 8 ürünlü bir mağaza modülünü ürün kartlarına nasıl dönüştüreceğinizi göstererek başlayacağız. Masaüstü için istediğiniz herhangi bir sütun düzenini seçebilirsiniz.

  • Ürün sayısı: 8
  • Sütun düzeni: 4 sütun
Divi sütun tasarımını değiştirin

Duyarlı boyutlandırma

Mağaza modülümüzün boyutunu artırmak için, tasarım sekmesindeki boyutlandırma parametrelerini değiştireceğiz. Bunu yalnızca tablet ve telefon için yaptığımızı unutmayın.

  • Genişlik:% 100 (masaüstü),% 250 (tablet ve telefon)
  • Maksimum genişlik:% 100 (masa),% 250 (tablet ve telefon)
Duyarlı tasarım yapılandırması

CSS sınıfı

Ayrıca mağaza modülümüze bir CSS sınıfı da ekleyeceğiz. Daha sonra CSS kodunu eklediğimizde sadece bu CSS sınıfını taşıyan Mağaza modülünü dönüştürebiliriz. Başka bir deyişle, başka bir Mağaza modülünün normal durumda görünmesini istiyorsanız, bu CSS sınıfını dışarıda bırakmak bunu yapmanıza izin verecektir.

  • CSS sınıfı: ürün kaydırma kartları
CSS modülü deposu divi özniteliğini değiştir

Reaktif taşmalar

Farklı ekran boyutlarında görünürlük ayarlarını değiştirerek satır ayarlarını tamamlayacağız. Ayarlarda görebileceğiniz gibi, kaydırma efektinin yalnızca daha küçük ekran boyutlarında olmasını istiyoruz.

  • Yatay taşma: gizli (masa), kaydırma (tablet ve telefon)
  • Dikey taşma: gizli
Taşma yapılandırması

Mağaza modülünün altına bir kod modülü ekleyin

Mağaza modülünü değiştirdikten sonra, hemen altına bir kod modülü ekleyebilirsiniz.

Divi mağaza modülünün altına kod modülü ekleyin

Modüle CSS kodu ekleme

Aşağıdaki CSS kodu, 8 ürünün mağaza modülümüzü otomatik olarak reaktif manyetik kartlara dönüştürecektir:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Css divi kodu ekle

Farklı ürün hesaplarını eşleştirin

Şimdi, mağaza modülünüze daha az (veya daha fazla) ürün eklemek istiyorsanız, kod iki yerde biraz değişir. Bu iki konum istenen sonuca uyacak şekilde manuel olarak değiştirilmelidir. Örneğin mağaza modülümüzdeki ürün sayısını '4' olarak değiştirelim.

  • Ürün sayısı: 4
Farklı ürün hesabını eşleştirin

Kodumuza geri döndüğümüzde iki değişiklik yapmamız gerekiyor. İlk olarak, grid şablonunun sütunlarını değiştirmemiz gerekecek. 8 yerine 4 (ürün sayımızla aynı sayıda) kullanıyoruz. Ayrıca, bu ürünlerin ürün sayfalarımızda kapladığı yüzde boyutunu da artırıyoruz (daha fazla ürün, daha az yer).

grid-template-column: yineleme (4,% 14)! önemli;

Ardından ürünlerin yerleştirildiği konteynerin genişliğini de değiştireceğiz. 4 ürün için bu,% 150'ye eşittir. Bu değerler sabit değildir, grid modelin kolonları ile konteynerin genişliği arasında oynanarak ve bularak elde edilir. 

Doğru dengeyi bulmak için, Visual Builder'daki mobil görünüme geçin ve bu değişikliklerin sonucunu görüntülerken değerleri dikkatlice ayarlayın.

width: 150%!important;

Ek divi css kodu ekleyin

Parşömene bir çıtçıt ekleyin

Kaydırma kartınızın tasarımında kullanıcı deneyimini bir adım daha ileri götürmek istiyorsanız, bir kaydırma çıtası da ekleyebilirsiniz. Kaydırma yakalama, ziyaretçilerinizin yeni bir ürünün başlangıcına bakarak kaydırma yapmasını sağlar.

 Bu, taramalarının kesin olması gerekmediği anlamına gelir, kaydırma çarpması bir noktada devreye girecek ve yan kaydırma mekanizması içindeki konumunu ayarlayarak gösterecektir. 

Ürününüzün kaydırma kartlarında kayan yakalamayı etkinleştirmek için, CSS kodunda her ürüne ayrı ayrı bir CSS kodu satırı ekleyin (aşağıdaki yazdırma ekranına bakın).

scroll-snap-align: başlat

Ayrıca aşağıdaki CSS kodu satırını ekleyerek mağaza modülümüzde kaydırma yakalamayı etkinleştireceğiz:

scroll-snap-type: x zorunlu

CSS kodunu özelleştirin

Diğer kategorileri görüntülemek için atölye modülünü yeniden kullanın

Bir satırın tamamını bir kez klonlayın

İlk manyetik kart setini tamamladıktan sonra, tüm çizgiyi bir kez klonlayabilirsiniz.

Divi atölye modülünü yeniden kullanın

Yinelenen satırdaki kod modülünü kaldır

Mağaza modülünüz öncekiyle aynı CSS sınıfını içerdiği sürece, bir kod modülü işe yarar. Devam edin ve yinelenen satırınızdaki kod modülünü çıkarın.

Divi kod modülünü çoğaltın

Yinelenen satırı istediğiniz kadar kopyalayın

Ve açılış sayfanızda görüntülemek istediğiniz tokatlama kartı setlerinin sayısına bağlı olarak yinelenen satırı gerektiği kadar kopyalayın!

Modülü gerektiği kadar klonlayın
Yinelenen divi modülü

4. Sayfa değişikliklerini kaydedin ve sonuçları bir mobil cihazda görüntüleyin

Ürün kaydırma kartlarını eklemeyi bitirdikten sonra, Visual Builder'dan çıkmadan önce sayfanızı kaydettiğinizden ve işiniz bittiğinden emin olun!

Mobil cihazda demo önizlemesi

anket

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

Divi ürün modülü mağaza animasyonu

Son düşünceler

Bu yazıda, entegre Divi Shop modülünü daha küçük ekran boyutlarında ürün manyetik kartlarına nasıl dönüştüreceğinizi gösterdik. Masaüstünde, Mağaza modülüne atanan orijinal sütun yapısını koruduk. 

Ürün kaydırma haritalarını kullanmak, dikey kaydırma ziyaretçilerinizi bunaltmadan yatay kaydırma mekanizmasına sonsuz ürünler eklemenize olanak tanır.

Bu, modern web sitesi tasarımında sıklıkla kullanılan bir eğilimdir çünkü kullanıcı davranışına odaklanır ve daha küçük ekranlarda çok çeşitli öğelere erişmeyi kolaylaştırır.

 Bu ürün sayfalarını herhangi bir sayfada kullanabilirsiniz, ancak özellikle oluşturduğunuz tüm ürün açılış sayfaları için kullanışlıdır. Ayrıca düzen JSON dosyasını ücretsiz olarak indirebildiniz! 

Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.

Divi'de kaydırmaya animasyonlu bir sayaç nasıl eklenir

Divi'de kaydırmaya animasyonlu bir sayaç nasıl eklenir

Animasyonlu sayı sayaçları, hizmetlerin, örnek olay incelemelerinin vb. Değerini vurgulamak için sayısal verileri görüntülemenin bir yolu olarak web'de popülerdir. Divi, animasyonlu sayı sayaçlarını kolayca oluşturmak için kullanılabilecek özel bir sayı sayacı modülüne sahiptir.

Bununla birlikte, bu eğitimde, Divi kullanarak kaydırmada hareket eden dijital sayaçların nasıl oluşturulacağını göstereceğiz. Divi'nin konum seçeneklerini ve kaydırma efektlerini kullanarak, kayan sayılarla bir tarihi görüntülemek için basit bir düzen tasarlayacağız.

Bölüm 1: Başlık bölümünü oluşturma

Bu ilk bölümde, düzen için basit bir başlık oluşturacağız.

İlk olarak, bölüme bir sütunluk bir satır ekleyin.

Bir divi bölüm modülü kaydedin

Ardından satıra yeni bir metin modülü ekleyin.

Metin modülünün içeriğini aşağıdakilerle güncelleyin:

Tarihi kaydet
Tarihi kaydedin 1

Ardından başlık metni stilini aşağıdaki gibi güncelleyin:

  • Başlık 2 Yazı Tipi: Prata
  • Öğe 2 Metin boyutu: 130 piksel (masaüstü), 70 piksel (tablet), 40 piksel (telefon)
Divi başlık değişikliği

Bölüm 2: Kayan animasyon ile sayaç oluşturma

Sonraki bölümde, bir tarihi (ay, gün ve yıl) görüntülemek için durana kadar kayan sayıları hareketlendirecek üç sayaç oluşturacağız. Her sayaç, toplam 5 metin modülü ve bir ayırıcı modül kullanılarak oluşturulacaktır. İlk metin modülü, sayacın etiketi (yani ay, gün, yıl) görevi görecek. Sonraki dört metin modülünün her biri, Divi'deki dikey hareket ofsetleri kullanılarak kaydırma sırasında canlandırılacak farklı bir sayı (devam eden) içerecektir. Alt ayırma modülü, sayıların taşmasını gizlemeye yardımcı olacaktır.

İşte böyle.

İkinci bir satır ekleyin

Mevcut satırın altına bir sütuna başka bir satır ekleyin.

Satır Parametreleri

Bir modül eklemeden önce, satır parametrelerini aşağıdaki gibi güncelleyin:

  • Oluk genişliği: 1
  • Dolgu: 0 piksel yüksek, 0 piksel düşük
Divi sınır yapılandırması

Sütun parametreleri

Ardından sütun ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:

  • Dolgu (masa): 100 piksel düşük
  • Dolgu (tablet ve telefon): 0 piksel düşük
Divi sütun aralığı yapılandırması

Metin modülü ekle

Ardından sütuna bir metin modülü ekleyin.

Divi metin modülü ekle

İçerik / etiket

Metin modülünün içeriği için "ay" kelimesini ekleyin.

Ayın divisini belirtin

Metin tasarım ayarları

İçerik ekledikten sonra tasarım ayarlarını aşağıdaki gibi güncelleyin:

  • Arka Plan Rengi: #ffffff
  • Metin yazı tipi: Konuşma
  • Metin boyutu: 40px
  • Metin satırının yüksekliği: 2em
  • Genişlik:% 100
  • Dolgu: üstte 20 piksel, altta 20 piksel, solda 20 piksel, sağda 20 piksel
  • Alt kenar genişliği: 5 piksel
  • Alt kenarlığın rengi: #eeeeee
Pozisyon

Ardından, gelişmiş sekmesinin altında, konum seçeneklerini aşağıdaki gibi güncelleyin:

  • Pozisyon: Göreli
  • Z endeksi 1
Prata wordpress modülü

İlk sayı için bir metin modülü ekleyin

İlk metin modülü yerleştirildikten sonra, kaydırma üzerinde hareket edecek sayıları eklemeye başlayabiliriz. İlk numarayı eklemek için, mevcut "Ay" metin modülünün altına yeni bir metin modülü ekleyin.

Hikaye anlatıcı metin modülü ekle

Numara / içerik ekle

Daha sonra, daha kolay başvuru için “num1” okumak üzere metin modülü etiketini güncelleyin. Ardından içeriği “01” numarasıyla güncelleyin.

Divi sayı modülü ekle

Sayı için Tasarım Ayarları

Tasarım sekmesi altında aşağıdakileri güncelleyin:

  • Metin Yazı Tipi: Prata
  • Metin Metin Rengi: # 8ab2d3
  • Metin Metin Boyutu: 70 piksel
  • Metin Harf Aralığı: 4 piksel
  • Metin Satırı Yüksekliği: 1.5em
  • Dolgu: 20 piksel kaldı
Divi renk yapılandırması

NOT: Sayıların metin boyutu 70 piksel ve satır yüksekliği 1.5em'dir; bu, metin modülünün toplam yüksekliğinin 100 piksele yakın olacağı anlamına gelir. Bu, dikey hareket ofsetlerini eklemeye başladığımızda akılda tutmak önemlidir. Örneğin, metin modülüne “1” dikey ofset eklemek, metin modülünü tam olarak metin modülünün yüksekliği olan 100 piksel hareket ettirir.

İlk Sayı için Kaydırma Efektleri

Metin modülüne aşağıdaki kaydırma efektlerini ekleyin.

Dikey Hareket Sekmesi altında aşağıdakileri güncelleyin:

  • Dikey Hareketi Etkinleştir: VAR
  • Başlangıç ​​ofseti: 1 (% 10'de)
  • Ortalama ofset: 0 (% 20'de)
  • Son ofset: -1 (% 30'de)

Fade In and Fade Out sekmesinde, aşağıdakileri güncelleyin:

  • Solmaya giriş ve çıkışı etkinleştir: EVET
  • Başlangıç ​​opaklığı:% 0 (% 10'de)
  • Ortalama opaklık:% 100 (% 20'de)
  • Uç opaklığı:% 0 (% 30'ye kadar)

Klibin üst kısmındaki hareket efekti için tetikleyici ayarladığınızdan emin olun:

  • Hareket Efekti Tetikleyicisi: Öğe Üstü
Yapılandırma animasyon modülü divi metni

İkinci numara için metin modülü oluşturma

İlk sayıyı çoğalt

İlk numara oluşturulduktan sonra, ikinci numara metin modülünü oluşturmak için onu çoğaltın. Daha sonra, daha iyi referans olması için katmanlar görünümünde etiketi güncelleyin.

Yinelenen divi 1 metin modülü

Numarayı / içeriği güncelleme

İkinci dijital metin modülünün parametrelerini açın ve içeriği "02" numarasıyla güncelleyin.

2 numaralı divi'yi kaydet

Konumu güncelle

Ardından konum seçeneklerini aşağıdaki gibi güncelleyin:

  • Pozisyon: Mutlak
  • Dikey ofset: 126 piksel
Divi metin modülünün konumunu değiştirme

Kaydırma efektlerini güncelleme

Ardından kaydırma efektlerini aşağıdaki gibi güncelleyin:

Dikey Hareket sekmesinde aşağıdakileri güncelleyin:

  • Başlangıç ​​ofseti: 1 (% 20'de)
  • Ortalama ofset: 0 (% 30'de)
  • Son ofset: -1 (% 40'de)

Fade In and Fade Out sekmesinde, aşağıdakileri güncelleyin:

  • Başlangıç ​​opaklığı:% 0 (% 20'de)
  • Ortalama opaklık:% 100 (% 30'de)
  • Uç opaklığı:% 0 (% 40'ye kadar)
Animasyon kaydırma efekti divi

Üçüncü sayı için bir metin modülü oluşturun

İkinci sayıyı çoğalt

Üçüncü numara için metin modülü oluşturmak üzere, ikinci numara için metin modülünü çoğaltın.

Yinelenen metin modülü numarası 3

Numarayı / içeriği güncelleme

İçeriği "03" numarasıyla güncelleyin.

Divi metin modülünü değiştir

Kaydırma efektlerini güncelleme

Ardından kaydırma efektlerini güncelleyin:

Dikey Hareket sekmesinde aşağıdakileri güncelleyin:

  • Başlangıç ​​ofseti: 1 (% 30'de)
  • Ortalama ofset: 0 (% 40'de)
  • Son ofset: -1 (% 50'de)

Fade In and Fade Out sekmesinde, aşağıdakileri güncelleyin:

  • Başlangıç ​​opaklığı:% 0 (% 30'de)
  • Ortalama opaklık:% 100 (% 40'de)
  • Uç opaklığı:% 0 (% 50'ye kadar)
Metin modülü animasyonunu düzenleyin

Dördüncü sayı için bir metin modülü oluşturma

Üçüncü yinelenen sorun

Kaydırma sayacı için dördüncü sayı oluşturmak için üçüncü sayı için metin modülünü çoğaltın.

Yinelenen metin modülü divi numarası 4

Numarayı / içeriği güncelleme

İçeriği "04" numarasıyla güncelleyin.

Divi metin modülü değerini yapılandırın

Kaydırma efektlerini güncelleme

Ardından kaydırma efektlerini güncelleyin:

Dikey Hareket sekmesinde aşağıdakileri güncelleyin:

  • Başlangıç ​​ofseti: 1 (% 40'de)
  • Ortalama ofset: 0 (% 50'de)
  • Bitiş ofseti: 0 (% 60'da)

Fade In and Fade Out sekmesinde, aşağıdakileri güncelleyin:

  • Başlangıç ​​opaklığı:% 0 (% 40'de)
  • Ortalama opaklık:% 100 (% 50'de)
  • Uç opaklığı:% 100 (% 60'ye kadar)
Animasyon yapılandırma modülü 4 divi

Alt ayırıcı ekle

Son metin modülünün altına yeni bir ayırıcı modül ekleyin. Bu, görünümde kayan metnin alttan taşmasını gizlemek için kullanılacaktır.

Divi ayırıcı modülü ekle

Ardından ayırıcıyı görüntülemek için HAYIR'ı seçin.

Divi ayırıcısını görüntüleme

Stil ve konum ayarları

Ayırıcı tasarımını aşağıdaki gibi güncelleyin:

  • Arka Plan Rengi: #ffffff
  • Genişlik:% 100
  • Yükseklik: 100px
  • Üst kenar genişliği: 5 piksel

Gelişmiş sekmesinde aşağıdakileri güncelleyin:

  • Devre dışı bırak: telefon ve tablet
  • Pozisyon: Mutlak
  • Yer: sol alt

ÖNEMLİ: Ayırıcının kaplayacağı alan, daha önce sütuna 100 piksel alt dolgu eklenerek oluşturulmuştur. Bu dolguyu eklemezseniz, ayırıcı rakamlarla çakışacaktır.

Ek sayaç ve sütun oluşturma

Sütun 1'i çoğaltın ve içeriği güncelleyin

Yeni bir sayaç oluşturmak için 1. sütunu çoğaltın. Bu, tüm öğelerin otomatik olarak yerinde olduğu ikinci bir sütun oluşturur.

Daha sonra tek yapmanız gereken tüm metin modüllerinin içeriğini yeni metinler ve sayılarla güncellemektir.

Tüm sütun divi'sinin kopyasını oluştur

Sütun 2'i çoğaltın ve içeriği güncelleyin

Tüm metin modüllerinin içeriği 2. sütunda güncellendiğinde, yıl için üçüncü bir sayaç oluşturmak için 2. sütunu çoğaltın. Ardından her metin modülünün içeriğini gerektiği gibi güncelleyin.

Nihai sonuç

İşte son sonuç.

Diğer Kaynaklar

Son düşünceler

Animasyonlu kayan sayı sayaçlarına sahip bu basit düzen, dijital verileri yeni ve benzersiz bir şekilde görüntülemek için yararlı olmalıdır. Tarih kavramını bir kenara atıp, hayal edebileceğiniz her şey için sayaçları kullanmaktan çekinmeyin!

Divi'de animasyonlu çekmeceler nasıl oluşturulur

Divi'de animasyonlu çekmeceler nasıl oluşturulur

Altbilgi çekmeceleri, kullanıcılar tarafından kolayca erişilebilen ek içeriği depoladıkları için herhangi bir web sitesine yararlı eklemelerdir. Altbilgi çekmeceleri, bir düğmeye tıklayarak veya üzerine gelindiğinde açılıp kapatılabilen web içeriği kaplarıdır (Divi bölümü gibi). Premium içerik için biraz zulaya sahip olmak gibi.

Bu eğitimde, Divi'de kayan bir altbilgi çekmecesi tasarlayacağız. Altbilgi çekmecesini genel web sitesi şablonu altbilgi alanına ekleyeceğiz, böylece altbilgi çekmecesine normal altbilgi içeriğiyle site genelinde erişilebilir.

Kullanacağımız işlemle, herhangi bir Divi bölümü (ve içeriği) birkaç dakika içinde bir alt bilgi çekmecesine dönüştürülebilir.

Altbilgi Çekmecesi Şablonunu Divi Sitenize Ekleme

Bu şablonun eklenmesi, Divi sitenizdeki varsayılan web sitesi şablonunun (varsa) yerini alacaktır. Canlı bir sitede hiçbir şeyi karıştırmamak için onu bir test sitesine eklemenizi öneririz.

Sabit altbilgi çekmecesi modelini kendi web sitenize aktarmak için, JSON dosyasına erişmek için indirme zip dosyasını açın.

Ardından WordPress kontrol paneline gidin ve Divi> Tema Oluşturucu'ya gidin.

Ardından sayfanın sağ üst tarafındaki taşınabilirlik simgesine tıklayın.

Taşınabilirlik penceresinde, önceden açtığınız JSON dosyasını seçin ve varsayılan web sitesi şablonunda önceden sahip olmadığınız bir şey olması durumunda, 'İçe aktarmadan önce yedeklemeyi indir' seçeneğini seçin. değiştirmek istemedi.

Ardından İçe Aktar düğmesini tıklayın.

Model divi'yi içe aktar

Son olarak, tema üreticisine değişiklikleri kaydedin ve sabit altbilgi çubuğunu görmek için canlı bir sayfa görüntüleyin.

Divi düzeni değişikliklerini kaydedin

Şimdi öğreticiye geçelim, tamam mı?

Bölüm 1: Global Altbilgi Ekleme

Divi tema oluşturucusu, varsayılan web sitesi şablonunu güncelleyerek varsayılan altbilgiyi yenisiyle değiştirmenize olanak tanır.

Global bir altbilgi oluşturmak için, WordPress kontrol paneline gidin ve Divi> Tema Oluşturucu'ya gidin. Ardından, Varsayılan Web Sitesi Şablonunun içindeki "Genel Altbilgi Ekle" alanına tıklayın.

Divi düzenleyici seçimi

Ardından açılır listeden "Genel Altbilgi Oluştur" seçeneğini seçin.

Divi model altbilgisi ekle

Genel altbilgi düzenine önceden tanımlanmış bir düzen ekleme

Bu, Model Yerleşim Düzenleyicisini dağıtacak ve burada, inşa etmeye nasıl başlamak istediğinize dair üç seçenek size hemen sorulacaktır. "Önceden tanımlanmış bir düzen seçin" seçeneğini seçin.

Önceden oluşturulmuş divi modelini seçin

Kitaplıktan Yükle açılır penceresinde, kırtasiye açılış sayfası düzenini bulun. Ardından "Bu düzeni kullan" ı tıklayın.

Bir divi modeli kullanın

Hazır mizanpajdaki istenmeyen içeriği kaldırın

Düzen düzenleyiciye yüklendikten sonra, ayarlar menüsündeki katmanlar simgesine tıklayarak Katmanlar açılır kutusunu genişletin. Ardından, son ikisi dışındaki tüm düzen bölümlerini silin.

Gereksiz bölümü silin

İki bölümü taşıma ve etiketleme

Bölümler kaldırıldıktan sonra, biri "Altbilgi" ve diğeri "Nasıl çalışır" başlıklı iki bölümünüz olmalıdır. "Altbilgi" bölümünü düzenin en üstüne taşıyın.

Divi altbilgisi

Alt bölümdeki ifadeyi "Altlık Çekmecesi" olarak değiştirin. Bu, altlık çekmecemizin içeriği olarak kullanacağımız bölüm olacaktır.

Divi altbilgi etiketini değiştir

Bölüm 2: Sabit altbilgi çekmecesini oluşturma

Bölümlerden birini altbilgi ve diğerini altbilgi çekmecesi olarak belirlediğimize göre, artık sabit altlık çekmecemizi oluşturmaya hazırız. Altbilgi çekmecesini değiştirmek için kullanacağımız blurb simgesini oluşturarak başlayalım.

Altbilgi çekmecesi düğmesinin oluşturulması

Yeni bir satır ekle

Alt altbilgi bölümünde, bir sütuna yeni bir satır ekleyin.

sabit ayak çekmece

Yeni satırı "Çekmece Düğmesi" olarak etiketleyin çünkü bu, çekmeceyi açıp kapatmak için kullanılan düğmeyi içerecek satırdır. Ardından çizgiyi bölümün üstüne taşıyın.

Seçim düzeni divi

Satır dolgu

Bir modül eklemeden önce, satır ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:

  • Dolgu: 0 piksel yüksek, 0 piksel düşük
Confiuration divi aralığı

Bölüm dolgusu

Ardından "Altbilgi çekmecesi" bölümündeki ayarları açın ve dolguyu aşağıdaki gibi güncelleyin:

Divi bölüm aralığı yapılandırması

Altbilgi çekmecesini değiştiren tıklanabilir düğmeyi oluşturmak için, simgeli bir tanıtım modülü kullanacağız. Ve, Blurb kapsülü kabının kare şeklini daire simgesiyle birleştirerek ona benzersiz bir su damlası şekli vereceğiz.

İşte böyle.

Bir Bulanıklaştırma modülü ekleme

Bölümün üst kısmındaki "Çekmece düğmesi" satırına bir sunum metin modülü ekleyin.

Altbilgi çekmecesi divi
Bulanık içerik / simge

Ardından, varsayılan başlığı ve gövde içeriğini kaldırın ve sol üst köşeyi işaret eden ok simgesini seçin (ekran görüntüsüne bakın). Kısmen döndürülmüş simgeyi kullanıyoruz çünkü onu daha sonra döndüreceğiz.

Simge altbilgi çekmecesi divi'yi seçin
Bulanık Tasarım

Ardından sunum metnini aşağıdaki gibi verin:

  • Arka Plan Rengi: # 081540
Divi arka planını değiştir

Ardından tasarım parametrelerini aşağıdaki gibi güncelleyin:

  • Simge rengi: #eeeeee
  • Daire simgesi: EVET
  • Daire rengi: # 081540
  • Simge yazı tipi boyutunu kullan: EVET
  • Simge yazı tipi boyutu: 17 piksel
Blurb divi düğmesini özelleştirin
Sunum metni boyutu

Şimdi modüle aşağıdaki gibi bir yükseklik ve genişlik verin:

  • Genişlik: 30px
  • Yükseklik: 30px

Bu, su damlası şeklini oluşturmak için daire simgesinin metin kabına taşmasına neden olur.

Divi düğme tasarımını düzenleyin
Bulanık Konum

Ardından, sunum metnine bölümün üst ortasında mutlak bir konum verin.

  • Pozisyon: Mutlak
  • Yer: Top Center
Divi düğme konumunu değiştir
Bulanık dönüşüm ayarları

Şimdi, bulutu / simgeyi yukarı döndürmek ve bölüm kabının hemen üstüne konumlandırmak için dönüştürme seçeneklerini kullanabiliriz. Şimdi, tarayıcı penceresinin altındaki bölümü gizlediğimizde, simge görünür / tıklanabilir kalacaktır.

Aşağıdaki öğeleri güncelleyin:

  • Çevir X eksenini dönüştür: -50%
  • Y ekseni çevirisini dönüştür:% -250
  • Z ekseni dönüşünü dönüştürün: -45 derece

Ardından varsayılan simge animasyonunu kaldırın:

  • Resim / Simge Animasyonu: Animasyon Yok
Divi'ye dön düğmesi

Çekmeceyi değiştirmek için JQuery kullanacağız, bu nedenle metni / simgeyi kodda daha sonra kullanacağımız bir CSS sınıfıyla tıklanabilir bir öğe olarak hedeflememiz gerekiyor. Aşağıdaki CSS sınıfını ekleyin:

  • CSS sınıfı: hedef çekmece
Bir divi seçici tanımlayın

Altbilgi çekmecesi bölüm ayarları

Şimdi çeviri dönüştürme seçeneğini kullanarak "Altlık Çekmecesi" bölümünü gizleyeceğiz. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

  • Y eksenini çevirme dönüşümü:% 100

Buradaki dönüşümü kullanmanın güzelliği, yüzde değerlerinin öğenin gerçek boyutuna dayalı olmasıdır. Böylece, Y ekseni üzerindeki% 100, doğrudan bölümün yüksekliğine göre olacaktır (herhangi bir zamanda neyse, nomatter). Başka bir deyişle, eleman kendi yüksekliği kadar tam mesafe aşağı hareket ettirilecektir.

Bölüm divi dönüştür

"Alt Bilgi Çekmecesi" ni tekrar görünüme kavuşturmak için, bölüme az önce eklediğimiz dönüştürme çevirisini tersine çevirmemiz gerekecek. Bunu yapmak için, öğeyi bir CSS sınıfıyla hedeflememiz ve simgeye tıklayarak çeviri dönüşümünü devre dışı bırakmamız gerekir (tüm bölümü orijinal konumuna geri getirin).

Altbilgi çekmecesi bölümüne bir CSS sınıfı ekleme

Gelişmiş sekmesinin altında, aşağıdaki CSS sınıfını ekleyin:

  • CSS sınıfı: has-dönüşümü
Add sınıfında dönüşüm divi var

Altbilgi çekmecesi bölümü Sabit konum

Son adım için, altlık çekmecesini tarayıcı penceresinin altında (simgesiyle birlikte) kayacak şekilde sabitlememiz gerekir.

"Altbilgi Çekmecesi" bölümünün konumunu aşağıdaki gibi güncelleyin:

  • Pozisyon: sabit
  • Yer: sol alt
  • Z Endeksi: 13
Divi köşesindeki konumu değiştir

Mobil içeriği kapat

Hem tablete hem de telefona sığacak sınırlı miktarda altlık çekmecesi içeriğiniz olacağından (sınırlı ekran yüksekliği nedeniyle), gerekli olmayan öğeleri ekrandan devre dışı bırakmanız / gizlemeniz gerekecektir. Bu örnekte, kesit düzeninin orta satırını gizleyeceğiz.

Bölümü mobil cihazda gizle

"Altlık Çekmecesi" bölümünde ikinci satırdan son satıra kadar ayarları açın. Gelişmiş sekmesinin altında, telefon ve tablette hattı kapatmak için görünürlük seçeneğini güncelleyin.

Görünürlük divi bölümünü kontrol edin

Özel kod ekleme

Altbilgi çekmecesine tıklama ve geçiş işlevini eklemek için sayfaya özel CSS ve JQuery eklememiz gerekir. Bunu yapmak için, düğme için kullanılan Blurb modülünün altında yeni bir kod modülü oluşturun.

Modül kodu ekleyin

Sonra kod alanına aşağıdaki kodu yapıştırın:

.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;}  .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation');      $('.has-transform').toggleClass('toggle-drawer-animation');   });    });})( jQuery );   
Divi kod modülü ekle

Değişiklikleri kaydet

Düzenleyiciden çıkmadan önce düzeni kaydetmeyi unutmayın.

Divi değişikliklerini kaydedin

Ayrıca tema üreticisine değişiklikleri kaydedin.

Değişiklikleri Kaydet

Nihai sonuç

Artık sonucu görmek için web sitenizdeki herhangi bir sayfaya gidebiliriz.

Son düşünceler

Kayan altlık çekmecesinin içeriği eğlenceli ve erişilebilir bir şekilde tanıtmanıza yardımcı olacağını umuyoruz. Herhangi bir çekmece gibi, aklınıza gelebilecek hemen hemen her şeyle doldurabilirsiniz.

Diğer Kaynaklar

İşte Divi'nin dahili özellikleriyle daha fazlasını başarmanıza yardımcı olabilecek öğreticilerin bir listesi.

Çeviri: Zarif Temalar

Divi'de kaydırma efektleriyle kayan bir kişi bölümü oluşturma

Divi'de kaydırma efektleriyle kayan bir kişi bölümü oluşturma

Her web sitesinin bir iletişim bölümüne ihtiyacı vardır, ancak bu standart bir tasarıma gitmeniz gerektiği anlamına gelmez. Divi'nin kaydırma efektleriyle, öne çıkacak kayan bir temas bölümü oluşturabilirsiniz. Ziyaretçileri iletişim formunuzla etkileşime girmeye davet edecek dikey kaydırmalı iletişim bölümü düzeniyle kullanıcı etkileşiminizi geliştirin. Bu makalede, herhangi bir sayfaya ekleyebileceğiniz tam genişlikte bir kayan kişi bölümünün nasıl oluşturulacağını göstereceğiz. Divi Theme Builder ile bunu site çapında bir altbilginin üstüne bile ekleyebilirsiniz.

Aşağıda, kendi Divi kitaplığınıza indirebileceğiniz JSON düzenine sahip ücretsiz bir indirilebilir dosya bulacaksınız. Ayrıca, harita arka planını yeniden oluşturmanıza yardımcı olacak bir PSD şablonu ve kendi renklerinizle özelleştirebilmeniz için bir harita pimi SVG ekledik.

Bir eleman yapısı oluşturun

Bu tasarımda, vurgulamak istediğiniz konumun Google Haritasındaki bir temsili olan bir arka plan resmi kullanacağız. Bunu Photoshop veya başka bir görüntü düzenleyici ile yapabilirsiniz.

Yeni bölüm ekle

Şimdi Divi Builder ile kayan temas bölümünü oluşturmaya başlama zamanı! Yapacağımız ilk şey yeni veya mevcut bir sayfa açmak ve yeni bir bölüm eklemek.

İçerik sekmesinde, Photoshop'ta oluşturduğunuz haritanın arka planını ekleyin.

  • Arka plan resmi: değiştirilmiş haritanız
Divi arka plan resmi

aralık

Ardından, tasarım sekmesindeki bölüm aralığı ayarlarını özelleştirin.

  • Üst ve alt kenar boşluğu: 50vh
  • Alt doldurma: 0vw
Divi 1 bölüm aralığı yapılandırması

görünürlük

Ardından taşmaları görünür olarak ayarlayın.

  • Yatay ve dikey taşma: görülebilir
yüzer temas bölümü

Pozisyon

Son olarak, bölümün Z dizinini 10 olarak ayarlayın.

  • Z Endeksi: 10
Divi bölümü konumu

Yeni bir satır ekle

Sütun yapısı

Şimdi birkaç şey ekleme zamanı. İlk önce 2 sütunlu bir satır ekleyin.

Satırda iki sütun divi var

boyutlandırma

Çizgi parametrelerini açın ve boyutlandırmayı aşağıdaki gibi ayarlayın.

  • Genişlik
    • Ofis:% 90
    • Tablet ve telefon:% 80
  • Maksimum genişlik:% 90
Divi hattı parametresi

görünürlük

Gelişmiş sekmesine tıklayın ve ardından taşmaları ayarlayın.

  • Yatay ve dikey taşma: görülebilir
Divi hattı taşma yapılandırması

Pozisyon

Konum ayarlarını değiştirerek satır ayarlarını tamamlayın.

  • Pozisyon: Göreli
  • Ofset Menşei: Sol Üst
  • Dikey Ofset
    • Masaüstü: -8vw
Divi çizgisi konumunu yapılandırın

Sütun 1 Ayarları

Arka fon

Modül eklemeden önce tek tek sütunları biçimlendirmemiz gerekecek. Sütun 1'e arka plan rengi ekleyin.

  • Düz Renk: # 25274d
Sütun rengi 1 divi

aralık

Sonra aralık ayarlarını yapın.

  • Üst ve Alt Dolgu
    • Masaüstü ve Tablet: 7vw
  • Sol ve Sağ Dolgu
    • Masaüstü: 3vw
    • Tablet ve Telefon: 6vw
İki sütun bölüm aralığı yapılandırması

sınır

Ardından kenarlık ayarlarına yuvarlatılmış köşeler ekleyin.

  • Yuvarlak Köşeler: Dört köşenin tümü 10 piksel
Yuvarlak kenarlar divi bölümü

Kaydırma Efektleri

Sonuncu fakat son derece önemli olarak kaydırma efektleri ayarlarında dikey bir hareket kullanın. Bu yüzen bir efekt yaratmamıza yardımcı olacaktır.

  • Kaydırma Dönüştürme Efektleri: Dikey Hareket
  • Dikey Hareket / Masaüstü Seti
    • Başlangıç ​​Dengesi: 4
    • Orta Ofset: 0 (% 50'de)
    • Bitiş Ofseti: -4
  • Dikey Hareket / Tablet ve Telefon Seti
    • Başlangıç ​​Dengesi: 4
    • Orta Ofset: 0 (% 40 ve% 60'da)
    • Bitiş ofseti: -3
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi bölümü kaydırma efektini özelleştirin

Sütun 2 ayarları

Pozisyon

Şimdi ikinci sütunun parametrelerine geçelim. Konum parametrelerini uygun şekilde ayarlayın.

  • Pozisyon: Göreli
  • Ofsetin kökeni: sol üst
  • Dikey ofset
    • Ofis: 25vw
Divi sütun özelleştirme

Kaydırma efektleri

Ayrıca bu sütuna dikey bir hareket ekliyoruz.

  • Kaydırma dönüşüm efektleri: dikey hareket
  • Dikey / masaüstü hareketini tanımlama
    • Başlangıç ​​ofseti: 2
    • Ortalama ofset: 0 (% 50'de)
    • Bitiş ofseti: -2
  • Dikey hareketi / tableti ve telefonu tanımlama
    • Başlangıç ​​ofseti: 0
    • Ortalama ofset: 0 (% 50'de)
    • Bitiş ofseti: -2
  • Hareket Efekti Tetikleyicisi: Öğe Üstü
Divi kaydırma efekti

1 sütununa bir metin modülü ekleyin

içindekiler

1. sütundaki bir metin modülünden başlayarak modüller eklemenin zamanı geldi. İstediğiniz H2 içeriğini ekleyin.

Sütun 1 içerik modülü

Başlık metni

Tasarım sekmesine gidin ve H2 metninin stilini aşağıdaki gibi yapın.

  • Başlık seviyesi: H2
  • Yazı tipi: Palanquin Dark
  • Yazı tipi ağırlığı: kalın
  • Yazı Tipi Stili: TT
  • Renk: sarı # ffd868
  • boyut
    • Ofis: 5vw
    • Tablet: 10vw
    • Telefon: 12vw
  • Harf aralığı: 4 piksel
Üstte Divi yazı tipi özelleştirme

Sütun 1'e iletişim formu modülü ekleme

içindekiler

Metin modülünün altına bir iletişim formu ekleyin. Kullandığımız alanlar şunlardır:

  • Soyad
  • E-Posta Adresi
  • malzeme
  • Mesaj
Divi iletişim formu ekle

Spam Koruması

İletişim formu modülünü şekillendirmeden önce. spam korumasını etkinleştirin ve ReCaptcha hesabınızı bağlayın.

  • Spam koruma hizmeti kullanın: Evet
  • Servis Sağlayıcı: ReCaptcha
  • Bir hesap seçin
Divi iletişim formu spam koruması

alanlar

Tasarım sekmesine geçin ve alanları aşağıdaki gibi biçimlendirin.

  • Arka Plan Rengi: Koyu Mavi # 25274d
  • Metin rengi: açık gri # d1d1d1
  • Odak Arka Plan Rengi: Koyu Mavi # 25274d
  • Odak metni rengi: açık gri # d1d1d1
  • Yazı tipi: Palanquin
  • Tarz: TT
  • Metin boyutu
    • Ofis: 0.9vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Harf aralığı: 1 piksel
Renk alanlarını özelleştirme 1

Bouton

Ardından düğmeyi stilize edin.

  • Özel stiller: Evet
  • Metin boyutu: 20px
  • Metin rengi: koyu mavi # 25274d
  • Arka Plan Rengi: Sarı # ffd868
  • Sınır yarıçapı: 7 piksel
  • Simge Rengi: Koyu Mavi # 25274d
  • Üst kenar boşluğu: 5px
Divi düğme stilini özelleştirin 1
Divi düğme rengi yapılandırması

boyutlandırma

Daha sonra boyutlandırma parametrelerini değiştiririz.

  • Genişlik:% 100
  • Maksimum genişlik:% 100
Divi boyutlandırma yapılandırması

aralık

Ayrıca üst dolgu ekleyeceğiz.

  • Üst dolgu: 4vw
Divi aralığı

Sınır

Sınır parametrelerini özelleştirerek modül parametrelerini tamamlayın.

  • Yuvarlak köşeli girişler: Dört köşede 6 piksel
  • Girişler Kenarlık stilleri: dört tarafı da
  • Giriş kenarlığı genişliği: 2 piksel
  • Girişler Kenarlık rengi: sarı # ffd868
Divi sınır yapılandırması

Sosyal medya izleme modülünü 2. sütuna ekleyin

içindekiler

2. sütuna gidin ve bir sosyal medya modülü ekleyin. İhtiyacınız olan tüm sosyal ağları kullanın.

  • Facebook
  • Twitter
  • Linkedin
Modül bizi sosyal ağlarda takip edin

Ihtiyati haciz

Şekillendirmeden önce, karşılık gelen ağlara bağlantılar ekleyin.

Makalenin bağlamı

Şimdi ilk sosyal ağı açın ve arka plan rengini değiştirin.

  • Renk: Koyu Mavi # 25274d
Divi 1 arka planını değiştir

Öğe simgesi

Aynı elemanın tasarım sekmesinde, simge ayarlarını aşağıdaki gibi değiştirin.

  • Renk: sarı # ffd868
  • Simge yazı tipi boyutu
    • Masa ve tablet: 31 piksel
    • Telefon: 26 piksel
Renk divisini özelleştirin

Öğe aralığı

Ardından, simgeleri birbirinden ayırmak için küçük bir kenar boşluğu ekleyin.

  • Sağ kenar boşluğu: 1vw
Sosyal paylaşım aralığı yapılandırması

Öğe stillerini kopyalayıp yapıştırın

Kalan sosyal ağları biçimlendirmek için ana içerik penceresine dönün ve ilk simgeden öğe stillerini kopyalayın. Ardından öğe stillerini kalan sosyal ağlara yapıştırın.

Stil öğesini kopyala
Stil öğesi divi'yi yapıştır

hizalanma

Ana tasarım sekmesine geçin ve modülün sola hizalandığından emin olun.

  • Modülün hizalanması: sol
Hizalamayı seçin

boyutlandırma

Ardından modülün boyutlarını ayarlayın.

  • Genişlik:% 100
Divi boyutlandırmasını yapılandırın

aralık

Ayrıca tüm varsayılan dolguyu da temizleyin.

  • Üst, alt, sol ve sağ dolgu: 0vw
Divi aralığını yapılandırın

Sınır

Son olarak, kenarlık ayarlarında yuvarlatılmış köşeler ekleyin. Bu, tüm simgelerin kenarlıklarını aynı anda ayarlayacaktır.

  • yuvarlak köşeler
    • Sol üst ve sağ: 7 piksel
    • Sol alt ve sağ: 0 piksel
Divi modülü sınır yapılandırması

2 sütununa bir metin modülü ekleyin

içindekiler

Sosyal medya modülünün altına başka bir metin modülü ekleyin. Seçtiğiniz içeriği ekleyin. İki adres, bir telefon numarası ve bir e-posta ekledik. Her bir öğenin başlığında tümü büyük harflerle kalın kullanın.

  • Genel alan: 1587 Sukhumvit Soi 21, Bangkok, Tayland.
  • Satış noktası : Emporium Alışveriş Merkezi, 2. kat
  • Telefon: (321) 564 2398
  • E-posta: [e-posta korumalı]
Divi metin modülü adres yapılandırması

bağlam

Modülün arka plan rengini değiştirin.

  • Renk: Koyu Mavi # 25274d
Metin modülü arka plan yapılandırması

Metinleri

Tasarım sekmesine geçin ve metnin stilini belirleyin.

  • Yazı tipi: Palanquin
  • Renk: sarı # ffd868
  • Boyut: 18px
Divi modülü metin yazı tipi

aralık

Ayrıca özel aralık değerleri ekleyin.

  • Üst kenar boşluğu
    • Ofis: -60px
    • Tablet ve telefon: -50 piksel
  • Üst, alt, sol ve sağ dolgu
    • Ofis: 3vw
    • Tablet: 6vw
    • Telefon: 8vw
Divi aralığı marjı

Sınır

Ve kenarlık ayarlarına yuvarlatılmış köşeler ekleyerek modülü tamamlayın. Bu kadar!

  • Yuvarlak köşeler: Sağ üstte, sol altta ve sağ altta 10 piksel.
Yuvarlak kenarlık divi metin modülü

anket

Kayan kişiler bölümünü yeniden oluşturmayı bitirdiğimize göre, farklı ekran boyutlarında sonuca son bir göz atın.

yüzer temas bölümü

Ek Kaynaklar

Kaynakları, okuduklarınızı tamamlayıcı nitelikte olabilir. Ek olarak veya Divi temasına sahip olmayanlar tarafından kullanılabilirler.

Finish

Yeni Divi kaydırma efektlerini kullanmak, herhangi bir standart düzeni güzel bir tasarıma dönüştürür. Kendi arka planınızı oluşturarak, bitmiş tasarımın görünümü üzerinde daha fazla kontrole sahip olursunuz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne bir yorum bırakın!

Divi ile renkli bir metin arka plan kaydırma animasyonu nasıl oluşturulur

Divi ile renkli bir metin arka plan kaydırma animasyonu nasıl oluşturulur

Bir metin arka planı kaydırma animasyonu oluşturmak, bir kullanıcı sayfayı kaydırırken web sitenizin metnine renkli animasyonlu dokular eklemenin benzersiz bir yoludur. Divi ile, birkaç temel tekniği öğrendikten sonra süreç şaşırtıcı derecede kolaydır.

Bu eğitimde, renkli metin arka plan kaydırma animasyonuna sahip 3 benzersiz tasarım oluşturmak için yalnızca Divi'nin yerleşik ayarlarının gücünü kullanacağız. Yepyeni bir görünüm için her tasarımın karanlık bir versiyonunu nasıl oluşturacağınızı bile göstereceğiz.

Başlayalım!

Olası Sonuç

Bugün inşa edeceğimiz tasarımlara bir göz atın.

Tasarım 1: Yatay kaydırma efektli metin arka plan gradyanı

Bu ilk tasarım, ekran filtreli bir metin modülünün arkasında renkli bir ayırma modülünü canlandıran yatay bir kaydırma efektine sahip olacak.

Sütun ekle

Başlamak için varsayılan bölüme tek sütunlu bir satır ekleyin.

Divi sütun düzenini seçin

Metin modülü ekle

Ardından sütuna yeni bir metin modülü ekleyin.

Divi metin modülü ekle

içindekiler

Sütunun içeriği için, içerik alanına aşağıdaki HTML kodunu yapıştırın:

Parça kodunu kaydedin

Metni biçimlendirme

Ardından metin tasarımını aşağıdaki gibi güncelleyin:

  • Arka Plan Rengi: #ffffff
  • Metin Yazı Tipi Stili: TT
  • Metin rengi: # 000000
  • Metin boyutu: 100 piksel (masaüstü), 40 piksel (telefon)
  • Metin harf aralığı: 0.15em
  • Metin satırının yüksekliği: 1em
  • Metnin hizalanması: orta
  • Başlık Yazı Tipi: Merriweather
  • Başlık yazı tipi ağırlığı: kalın
  • Başlık yazı tipi stili: TT
  • Üstbilgi Metni Hizalama: Merkez
  • Üstbilgi Metin Rengi: # 000000
  • Üstbilgi Metin Boyutu: 200px (Masaüstü), 80px (Telefon)
  • Başlık harfi aralığı: 0.15em
  • Başlık satırının yüksekliği: 1em

Dolgu ve filtre

Şimdi metin modülüne biraz dolgu ve ekran filtresi eklememiz gerekiyor. Arka plan renklerinin / modlarının metnin arkasında gösterilmesine izin veren bu tasarımın çalışması için filtreye ihtiyaç vardır.

Dolguyu ve filtreyi eklemek için aşağıdakileri güncelleyin:

  • dolgu: 15 piksel yüksek, 20 piksel düşük
  • Karışım Modu: Ekran

Not: Ekran harmanlama modu en iyi beyaz arka plan üzerinde siyah metinle çalışır. Siyah bir arka plan üzerinde beyaz metin kullanmak istersek, Çarpma harmanlama modunu kullanırdık.

Divi metin modülü aralık yapılandırması

Üst ve alt ayırıcı

Metin modülümüz tamamlandığında, ek bir tasarım öğesi için bazı ayırıcılar (metin modülünün üstünde ve altında) ekleyelim.

Alt ayırıcı ekle

Metin modülünün altına yeni bir ayırma modülü ekleyin.

Divi ayırıcı modülü ekle
Daha yüksek ayırma ayarları

Ayırıcı ayarlarını açın ve ayırıcıyı görüntülemek için HAYIR'ı seçin.

divi metin arka plan kaydırma efektleri

Ardından arka planı güncelleyin ve ayırıcıya aşağıdaki gibi metin modülüyle aynı karışım modunu verin:

  • Sol degrade arka plan rengi: # 000000
  • Sağdaki degrade arka plan rengi: #ffffff
  • Gradyan Yönü: 90deg
  • Başlama Konumu:% 48
  • Bitiş Pozisyonu:% 0
  • Karışım Modu: Ekran
Renk ayırıcı yapılandırması

Ardından, telefon ekranındaki bölücünün yüksekliğini şu şekilde güncelleyin:

  • Yükseklik: 15 piksel (telefon)
Divi ayırıcı yapılandırması

Üst ayırıcı ekle

Üst bölücüyü oluşturmak için, önceki alt bölücüyü çoğaltın ve katman görüntüleme alanını kullanarak metin modülünün üzerine sürükleyin.

Divi ayırıcı ekleme

Ardından renkleri degrade arka plan üzerinde ters çevirin.

Gradyan arka planı ekleme

Satır parametrelerini güncelleme

Üst ve alt ayırıcılarımız yerleştirildikten sonra, hat parametrelerini aşağıdaki gibi güncelleyin:

  • Oluk genişliği: 1 (modüller arasındaki düşük kenar boşluklarını kaldırmak için)
  • Maksimum genişlik: 600 piksel (masaüstünde ve tablette tutarlı bir tasarım tutmak için)
  • Çizgi hizalama: merkez
  • Dolgu: 0 piksel yüksek, 0 piksel düşük
  • Yatay taşma: gizli
  • Dikey taşma: gizli
Divi satırı parametresini özelleştirin

Animasyonlu metnin arka plan rengi için bir ayırıcı oluşturun

Bu ilk tasarımın son öğesi, kaydırma üzerindeki metnin arka plan rengini canlandırmak için kullanacağımız bölücüdür. Bunu yapmak için, alt bölücünün altına yeni bir ayırma modülü ekleyin.

Ayırıcı yerleştirme

Ardından ayırıcıyı görüntülemek için HAYIR'ı seçin.

Divi ayırıcıyı göster

Arka plan ayırıcı ayarları

Ayırıcıyı aşağıdaki gibi degrade arka planla güncelleyin:

  • Sol degrade arka plan rengi: # e02b20
  • Doğru arka plan gradyan rengi: # 8300e9
  • Gradyan Yönü: 90deg
  • Başlama Konumu:% 30
  • Bitiş Pozisyonu:% 70
Divi arka bölücü

Ayırıcının yüksekliğinin, metin modülündeki tüm metnimizi ve üst ve alt ayırıcıları renklendirecek kadar yüksek olmasını istiyoruz. Bu tasarım için yüksekliği 400px olarak ayarlayın.

  • Yükseklik: 400px
Bölücü bölücü yüksekliği

Ardından, bölücüye, onu diğer modüllerin doğrudan üzerine konumlandırması için mutlak bir konum verin. Bölücüyü diğer modüllerin arkasına yerleştirmek için Z endeksini kullanın.

  • Pozisyon: Mutlak
  • Z endeksi: -1
Dizin ayırıcı
Arka plan bölücü kaydırma efektleri

Ayırıcı konumundayken tek yapmamız gereken ayırıcıyı Divi'nin kaydırma efektlerini kullanarak metnin arkasına taşımaktır. Bu tasarım için, kaydırmaya sadece yatay hareket ekleyeceğiz.

Aşağıdaki öğeleri güncelleyin:

Yatay hareket sekmesinin altında ...

ofis

  • Yatay hareketi etkinleştir: EVET
  • Başlangıç ​​ofseti: 6 (% 20'de)
  • Ortalama ofset: 0 (% 40 -% 60'da)
  • Son ofset: -6 (% 80'de)

telefon

  • Başlangıç ​​ofseti: 3
  • Bitiş ofseti: -3

Ayrıca, klibin ortasındaki hareket efekti için tetiği ayarladığınızdan emin olun:

  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Animasyon yapılandırması

Bölüm aralığı ekle

Tasarımı sınamak üzere geçici bir kaydırma alanı oluşturmak için bölüme aşağıdakileri ekleyin:

  • Kenar boşluğu: 80vh yukarıda, 80vh aşağıda
Yapılandırma boyutu bölümü divi

Son düşünceler

Bu makalede gösterilen metin arka plan animasyon tasarımları, kaydırma üzerine ekleme hareketi olmadan statik bir tasarım olarak gerçekten iyi çalışır. Bununla birlikte, ek kaydırma efektleri tasarımı gerçekten tamamen yeni bir seviyeye taşır. Daha fazla renk ve efekt denemekten çekinmeyin!

Yorumlarda sizden haber almak için sabırsızlanıyorum.

Sağlığınıza!

Divi ile sabit bir altbilgi çubuğu nasıl oluşturulur

Divi ile sabit bir altbilgi çubuğu nasıl oluşturulur

Sabit altbilgi çubukları, kullanıcı herhangi bir cihazda sayfa içeriğinizle etkileşimde bulunurken web sitenizle ilgili önemli bilgileri önde ve ortada tutmanın kullanışlı bir yolu olabilir. 

Divi'de olduğu gibi, bir altbilgi çubuğu genellikle ana altbilgi içeriğinden sonra sayfanın en altında statik bir öğe olarak bulunur. Telif hakkı metni ve sosyal medya simgeleri gibi şeyleri içerir. 

Ancak, sayfanın altındaki altbilgi çubuğu içeriğini gizlemezseniz, kullanıcı ekranı kaydırırken ekranın altında kayan özel bir altbilgi çubuğu oluşturabilirsiniz.

Bu eğitimde, Divi tema oluşturucusunu kullanarak tamamen kişiselleştirilmiş bir sabit altbilgi çubuğu tasarlayacağız. Bu, bu küçük ama önemli içerik parçalarını her zaman gözünüzün önünde tutmanız için kullanışlı olacaktır.

Olası Sonuç

İşte tasarlayacağımız sabit altbilgi çubuğuna genel bir bakış.

Divi sitenize indirmek için sabit altbilgi çubuğu şablonu nasıl eklenir

UYARI!: Bu şablonun eklenmesi, Divi sitenizdeki varsayılan web sitesi şablonunun (varsa) yerini alacaktır. Canlı bir sitede hiçbir şeyi karıştırmamak için onu bir test sitesine eklemenizi öneririz.

Sabit altbilgi çubuğu şablonunu kendi web sitenize aktarmak için, JSON dosyasına erişmek üzere indirme zip dosyasını açın.

Ardından WordPress kontrol paneline gidin ve Divi> Tema Oluşturucu'ya gidin.

Ardından sayfanın sağ üst tarafındaki taşınabilirlik simgesine tıklayın.

Taşınabilirlik penceresinde, önceden açtığınız JSON dosyasını seçin ve varsayılan web sitesi şablonunda önceden sahip olmadığınız bir şey olması durumunda, 'İçe aktarmadan önce yedeklemeyi indir' seçeneğini seçin. değiştirmek istemedi.

Ardından İçe Aktar düğmesini tıklayın.

Son olarak, tema üreticisine değişiklikleri kaydedin ve sabit altbilgi çubuğunu görmek için canlı bir sayfa görüntüleyin.

Divi değişikliklerini kaydedin

Şimdi öğreticiye geçelim, tamam mı?

Bölüm 1: Global Altbilgi Ekleme

Divi tema oluşturucusu, varsayılan web sitesi şablonunu güncelleyerek varsayılan altbilgiyi yenisiyle değiştirmenize olanak tanır.

Global bir altbilgi oluşturmak için, WordPress kontrol paneline gidin ve Divi> Tema Oluşturucu'ya gidin. Ardından, Varsayılan Web Sitesi Şablonunun içindeki "Genel Altbilgi Ekle" alanına tıklayın.

Ardından açılır listeden "Özel bir altbilgi oluştur" seçeneğini seçin.

Bu, Model Yerleşim Düzenleyicisini dağıtacak ve burada, inşa etmeye nasıl başlamak istediğinize dair üç seçenek size hemen sorulacaktır. "Sıfırdan Oluştur" u seçin.

Bölüm 2: Sabit altbilgi çubuğunu oluşturma

Artık şablon düzen düzenleyicisinden düzenleme yaptığımıza göre, sabit altbilgi çubuğunu tasarlamaya başlayabiliriz. Tamamlandığında, içeriğe hazır üç sütunlu sabit bir altbilgi çubuğunuz olacak.

Satıra üç sütun düzeni ekleme

İlk olarak, satıra üç sütun düzeni ekleyin.

3 sıralı bölüm

Bölüm yüksekliği

Üç sütun eklendikten sonra bölüme tanımlı bir yükseklik verelim. Bu, sabit hattın sonunda sona ereceği sayfanın alt kısmında alan oluşturmak için önemlidir. Ayrıca varsayılan üst ve alt dolguyu da kaldıracağız.

Yüksekliği ve dolguyu ayarlamak için bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

  • Yükseklik: 85px
  • Dolgu: 0 piksel yüksek, 0 piksel düşük
Divi 1 bölüm yüksekliği yapılandırması

Satır Parametreleri

Artık bölümümüz hazır olduğuna göre, satırı sabit bir altbilgi çubuğu olarak hizmet verecek şekilde özelleştirmeye hazırız. Satır ayarlarını açın ve ardından aşağıdakileri güncelleyin:

bağlam

  • Arka Plan Rengi: # 1a1e36
Hat ayarlarına erişim

Boyut ve aralık

  • Oluk genişliği: 1
  • Genişlik:% 100
  • Maksimum genişlik:% 100
  • Dolgu: 0 piksel yukarı, 0 piksel aşağı,% 3 sol,% 3 sağ
Divi bölümünü özelleştirin

Özel CSS

Satır sabit olsa da, sayfanın altındaki boşluğun satırı doğru bir şekilde içermesi için satır yüksekliğinin üst bölümün yüksekliğiyle eşleşmesini istiyoruz. Ve satır içeriğinin dikey olarak hizalandığından emin olmak istiyoruz. Bunu yapmak için, aşağıdaki özel CSS'yi satırın ana öğesine ekleyin:

ofis

yükseklik: devralma! önemli; ekran: esnek; hizalama öğeleri: merkez;

telefon

yükseklik: devralma! önemli; görüntüleme: blok;
CSS kodu ekleyin

Sabit konumlandırma

Çizgiyi ekranın alt kısmında yüzecek şekilde sabitlemek için alt orta konumda aşağıdaki gibi sabit bir konum vermemiz gerekir:

  • Pozisyon: sabit
  • Konum: alt merkez
Altbilgi konumu

Bölüm 2: Sabit altbilgi çubuğunun içeriğini oluşturma

Bu noktada, içeriğe hazır sabit konumlu bir altbilgi çubuğumuz var. Üç sütunun her birine istediğimiz herhangi bir içeriği ekleyebiliriz. Ancak bu, 85 piksel yüksekliğiyle sınırlı bir altbilgi "çubuğu" olduğundan, içerik miktarını sınırlamamız gerekir. Bu nedenle, 4. sütuna dinamik bir logo ve 1 menü öğesi içeren küçük bir menü ekleyeceğiz. 2. sütunda, dinamik bir cari yıla sahip telif hakkı metni ekleyeceğiz. 3. sütunda, üç sosyal medya izleme simgesi ekleyeceğiz.

Sütun 1'e bir menü ekleyin

Sütun 1'e bir menü modülü ekleyin.

Wordpress menü seçimi

Menüyü seçin

Ardından, web sitenizde önceden oluşturduğunuz menülerden birini seçin. Menü öğelerini 4 veya altında tuttuğunuzdan emin olun.

Seçim menüsü wordpress modülü

Site logosunu dinamik içerik olarak ekleyin

Logo menüsü için dinamik olarak site logosunu ekleyeceğiz. Logo ön izleme alanının üzerine gelerek "Dinamik içerik kullan" simgesine tıklayın. Ardından açılır listeden Site logosunu seçin.

Logo ekleyin

Arkaplanı kaldırın

Ardından, varsayılan menü arka planını kaldırarak şeffaf olmasını sağlayın.

Arka planı sil

Menü Tasarımı

Bu noktada menüye biraz tasarım eklemeye hazırız. Bu tasarım için, onu basit ve küçük tutacağız. Aşağıdaki tasarım parametrelerini güncelleyin:

  • Yazı tipi menüsü: Üstgeçit
  • Menü metni rengi: # b59c61
  • Sepya resmi:% 100
  • Maksimum logo yüksekliği: 50 piksel
Yazı tipi rengini değiştirin

Sütun 2'ye telif hakkı metni ekleme

Menü yerleştirildikten sonra, telif hakkı metnini eklemek için 2. sütuna gidin.

Metin modülü ekle

Sütun 2'ye yeni bir metin modülü ekleyin.

Seçim modülü metin divi

Geçerli tarihi metinden önce ve sonra dinamik olarak ekleyin

Burada, cari yılı telif hakkı metninde göstermek için dinamik içerikle yaratıcı olacağız. Bu, yılın site ömrü boyunca otomatik olarak güncellenmesini sağlayacaktır.

Bunu yapmak için, "Dinamik içerik kullan" simgesine tıklayın ve listeden "Geçerli tarih" i seçin.

Seçim tarihi

Geçerli Tarih açılır penceresinde aşağıdakileri güncelleyin:

  • önce:
  • 01Copyright &copy;
  • sonra:
  • 01| Tous Droits Reservés
  • Tarih Biçimi : görenek
  • Özel tarih biçimi : 20 yıl
Tarihi özelleştirin

Metni biçimlendirme

Metin tasarımını ve kenar boşluğunu aşağıdaki gibi güncelleyin:

  • Metin yazı tipi: Üst geçit
  • Metin rengi: # b59c61
  • Metnin hizalanması: orta
  • Kenar boşluğu (yalnızca telefon): üstte 10 piksel, altta 10 piksel
Divi yazı tipi seçimi metin modülü

Bu, telif hakkı metnini destekler.

Sütun 3'e sosyal medya izleme simgeleri ekleme

3. sütuna bir sosyal medya izleme modülü ekleyin.

Sosyal ağlar ekleyin

İçerik sekmesinde, siteye gerekli sosyal ağları ekleyin. Bu tasarım için üç tane kullanıyoruz.

Sosyal ağ izleme modülü ekle

Sosyal medya izleme ayarları

Ardından, tüm sosyal medya izleme simgeleri için tasarım ayarlarını aşağıdaki gibi güncelleyin:

  • Modül hizalama: düz (masaüstü ve tablet), merkez (telefon)
  • Simge Rengi: # 1a1e36
  • Özel simge boyutunu kullan: EVET
  • Simge yazı tipi boyutu: 16px (masaüstü ve tablet), 14px (telefon)
Personnalsier polis divi

Sosyal medya ayarlarını güncelleme

Bireysel sosyal ağ simgesinin tasarımını güncellemek için, ilk ağın ayarlarını açın ve aşağıdakileri güncelleyin:

  • Arka Plan Rengi: #ffffff
  • Dolgu: 8 piksel sağda, 8 piksel solda
  • Yuvarlatılmış köşeler: 8px
sabit ayak çubuğu divi

Sosyal medya ayarlarını herkese genişlet

Ardından ilk ağ için ek ayarlar menüsünü açın ve " Öğe Stillerini Genişlet " listede. Stilleri Genişlet açılır penceresinde, "içindeki Stilleri Genişletmeyi seçin" Bu sütun "Ve tıklayın uzatmak .

Bu, tasarımı sütundaki diğer simgelere genişletir.

Son düşünceler

Sabit bir altbilgi çubuğu eklemek bazı durumlarda anlamlıdır. Çubuğun yüksekliği, dikkat dağıtmayacak veya cep telefonunda çok fazla yer kaplamayacak kadar küçük. Daha iyi dönüşümler ve daha sorunsuz bir kullanıcı deneyimi için size önemli CTA'lar ekleme yeteneği sağlar.

Bu tasarım için, sayfanın alt kısmındaki boşluk, bölüm için sabit bir yükseklik ayarlanarak ve ardından sabit hattın bölümün yüksekliğini devralmasına izin verilerek (sabit olmasına rağmen) oluşturulur. 

Diğer kaynaklar

Divi ile web sitenizi tasarlarken oluşturmanıza yardımcı olabilecek ek kaynakların bir listesi.