Ekibinizi Divi'de Sergilemek İçin Tıklayın Üzerine Flip Animasyonlu Kartvizitler Nasıl Tasarlanır

Tıklamayla dönen kartvizitler tasarlamak, web sitenizdeki herhangi bir ekip üyesi bölümüne veya sayfasına yaratıcı bir ekleme olabilir. Kartvizitler, bir şirkette çalışan bir kişi hakkında kısa ve öz bilgi sağlamak için zaten tanıdık ve sezgisel bir yöntemdir. Bu nedenle, aynı tasarımı web'de sunmak mantıklıdır. Ayrıca, her kartta sağlanan bilgiler daha da dinamik ve etkileşimli hale gelebilir, bu da kullanıcının bilgileri kopyalamasına ve/veya kartvizit içindeki bağlantıları tıklamasına olanak tanır.

Bu eğitimde, tıpkı gerçek bir kartvizit gibi, kişi hakkındaki bilgileri ortaya çıkarmak için tıklamayla ters çevirme işlevine de sahip olan Divi'de benzersiz bir kartviziti nasıl tasarlayacağınızı göstereceğiz.

Hadi atlayalım ve başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

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

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de tıklandığında dönen bir Kartvizit tasarlama

Satır ve Sütun Ayarları

Başlamak için normal bölüme tek sütunlu bir satır oluşturun.

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Sütun Yüksekliklerini Eşitle: EVET
• Genişlik: %90
• Maksimum Genişlik: 1200 piksel

Sütunun ayarlarını açın ve aşağıdaki gibi biraz dolgu yapın:

• Dolgu (Masaüstü ve Tablet): 30 piksel üst, 30 piksel alt, 50 piksel sol, 50 piksel sağ
• Dolgu (Telefon): 15 piksel üst, 15 piksel alt, 15 piksel sol, 15 piksel sağ

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

• CSS Sınıfı: kart-sütun

Bu sınıf, daha sonra çevirme animasyonuna neden olacak tıklama olayını tetiklemek için kodumuzda bir hedef görevi görecektir.

Yinelenen Sütun

Artık bir sütun kurulumumuz olduğuna göre, her sütunun aynı dolguya ve CSS Sınıfına sahip olduğu iki sütunlu bir düzenimiz olacak şekilde sütunu çoğaltın.

Arka Kartın Oluşturulması

Kartvizit tasarımının ilk unsuru, kart bilgisi ile kartvizit arka planı olarak görev yapacak olan arka kart diyeceğimiz şeydir. Ön kartı oluşturmak için sütun 1'e bir ayırıcı ekleyin.

Ayırıcı ayarlarını açın ve ayırıcıyı GÖRÜNMEMEK için tıklayın. Ayırıcıyı yalnızca kartvizit için bir arka plan görüntüsü için kullanıyoruz.

Ardından aşağıdaki seçenekleri güncelleyin:

Arka plan rengi

• Arka Plan Rengi: #322b3f

Arka Plan Gradyanı

• Arka Plan Gradyanı Sol Renk: rgba(50,43,63,0.72)
• Arka Plan Gradyanı Sağ Renk: #322b3f
• Gradyan Türü: Radyal
• Bitiş Konumu: %34
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Arka plan görüntüsü

• Arka Plan Resmi: [ekip üyesinin resmini veya portresini yükleyin]
• Arka Plan Resmi Boyutu: sığdır
• Arka Plan Resmi Konumu: Merkez

boyutlandırma

• Genişlik: %100
• Minimum Yükseklik: 300 piksel
• Yükseklik: %100

Kutu Gölge

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 50px

CSS Sınıfı ve Mutlak Konum

Ardından, ayırıcıya aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: arka kart

Ve konumu mutlak olarak güncelleyin:

• Pozisyon: Mutlak

Arka Kart Logosunun Oluşturulması

Arka kart (bölücü) yerindeyken, kart bilgi öğelerimizi eklemeye başlayabiliriz. Başlamak için sol üst köşeye bir logo ekleyeceğiz.

Ayırıcı/arka kart modülünün altına bir görüntü modülü ekleyin.

Ardından yaklaşık 60 piksele 60 piksel boyutunda bir logo resmi yükleyin.

Ardından görüntüyü bir CSS Sınıfı ve mutlak bir konumla aşağıdaki gibi güncelleyin:

CSS Sınıfı

• CSS Sınıfı: kart içeriği

Konum

• Pozisyon: Mutlak
• Dikey Ofset: 30 piksel (masaüstü ve tablet), 15 piksel (telefon)
• Yatay Ofset: 50px (masaüstü ve tablet), 10px (telefon)

İsim

Kartvizitin adını oluşturmak için logo görüntüsünün altına yeni bir metin modülü ekleyin.

Gövde içeriğini kartvizitte yer almasını istediğiniz kişinin adıyla güncelleyin.

Tasarım sekmesi altında, paragraf metin stili seçeneklerini aşağıdaki gibi güncelleyin:

• Metin Yazı Tipi: Poppins
• Metin Metin Rengi: #ffffff
• Metin Metin Boyutu: 28px (masaüstü ve tablet), 22px (telefon)
• Harf Aralığı: 1px
• Metin Hizalama: Sağ

İş Pozisyonu (veya Rolü)

Karttaki kişinin konumunu (veya rolünü) eklemek için önceki metin modülünü adla çoğaltın.

Ardından vücut içeriğini kişinin konumu (veya rolü) ile güncelleyin.

Ardından konum metni modülünün tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Metin Yazı Tipi Stili: TT
• Metin Metin Boyutu: 16px (masaüstü ve tablet), 14px (telefon)
• Kenar boşluğu: 15 piksel alt

Şirket

Şirket adını kartvizite eklemek için önceki (pozisyon) metin modülünü çoğaltın.

Ardından gövde içeriğini şirketin adıyla güncelleyin.

Ardından şirket metin ayarlarını aşağıdaki gibi güncelleyin:

• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Yazı Tipi Stili: varsayılan
• Metin Metin Boyutu: 22px (masaüstü ve tablet), 18px (telefon)
• Metin Hizalama: Sol

Telefon numarası

Kartvizit için telefon numarası oluşturmak için (şirket) metin modülünün altına bir tanıtım yazısı modülü ekleyin.

(Telefon) tanıtım yazısının gövde içeriğini kartta yer almasını istediğiniz telefon numarasıyla güncelleyin.

Tanıtım yazısı için bir telefon simgesi kullanmak için tıklayın.

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

• Simge Rengi: rgba(162,71,232,0.6)
• Resim/Simge Yerleşimi: Sol
• Simge Yazı Tipi boyutunu kullan: EVET
• Simge Yazı Tipi Boyutu: 20px
• Gövde Yazı Tipi: Poppins
• Gövde Metni Rengi: #ffffff
• Gövde Metin Boyutu: 16px
• Kenar boşluğu: 10 piksel alt

Email adresi

E-posta adresini kartta öne çıkarmak için (telefon) tanıtım modülünü çoğaltın ve gövde içeriğini e-posta adresiyle güncelleyin.

Ardından simgeyi bir zarf simgesine güncelleyin.

İnternet sitesi

Web sitesini kartta öne çıkarmak için (telefon) tanıtım modülünü çoğaltın ve gövde içeriğini web sitesiyle güncelleyin.

Ardından simgeyi daha uygun bir simgeyle güncelleyin.

Sosyal Medya Takip Simgeleri

Son kart içeriğimiz için, karta sosyal medya takip simgeleri ekleyeceğiz. Bunu yapmak için (web sitesi) tanıtım yazısının altına bir sosyal medya takip modülü ekleyin.

Sosyal Medya Takip Ayarları modunda, sosyal ağların her birini şeffaf bir arka planla güncelleyin.

(bağlantı URL'lerini daha sonra gerektiği gibi ekleyebilirsiniz)

Ardından modüle doğru hizalamayı verin.

Tüm Kart İçeriği Modüllerine Aynı CSS Sınıfını Ekleyin

Kartvizit için tüm kart içerik modüllerini oluşturmayı bitirdikten sonra, tüm bu modüllere aynı CSS Sınıfını vermemiz gerekiyor. Bunu yapmak için, tüm kart içerik modüllerini (logo, ad, konum, telefon, e-posta, web sitesi ve sosyal medya simgeleri) seçmek için çoklu seçim özelliğini kullanın, ardından öğe ayarlarını açın ve aşağıdaki sınıfı ekleyin:

• CSS Sınıfı: kart içeriği

Bu sınıfı, ön kart çevirme animasyonundan önce ve sonra içeriği gizlemek ve göstermek için özel CSS kodumuzu hedefleyeceğiz.

Ön Kart

Artık arka kartımız tüm kart içeriğiyle bittiğinde, arka kartın ve arka kart içeriğinin üstüne oturacak ön kartı oluşturmaya hazırız. Bunu yapmak için 2. sütundaki bir görüntü modülünü kullanarak ön kartı tasarlayacağız. Ardından, 1. sütundaki arka kartın üstüne oturmak için taşıyacağız.

İlk olarak, 2. sütuna bir görüntü modülü ekleyin.

Görsel olarak kullanılacak arka kart logosu için kullanılan logo görselinin aynısını (60px x 60px) yükleyin.

Ardından arka kart (bölücü) modülünün ayarlarını açın ve arka plan tasarımını kopyalayın.

Ardından tasarımını yaptığımız ön kart için görüntü ayarlarını açın ve arka plan tasarımını görüntü modülü arka plan seçeneğine yapıştırın.

Tasarım sekmesi altında, görüntünün aralığını aşağıdaki gibi güncelleyin:

• Dolgu (masaüstü ve tablet): 30 piksel üst, 50 piksel sol
• Dolgu (telefon): 15 piksel üst, 10 piksel sol

Gelişmiş Ayarlar

Gelişmiş sekmesi altında, resme aşağıdaki CSS Sınıfını verin:

• CSS Sınıfı: ön kart

Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

[/css]
yükseklik: %100;
genişlik: %100;
[/css]

Konum seçeneklerini güncelleyin:

• Pozisyon Mutlak
• Z İndeksi: 13

Özel yükseklik ve genişlik (mutlak konumla birlikte), resmi (veya logoyu) içeren modülün ana sütunun tam yüksekliğini ve genişliğini kapsamasını sağlar. Bu yüzden tek bir resim modülü olmasına rağmen, kartvizit tasarımımız için güzel bir ön kart olarak iki katmanlı resmi (logo ve arka plan resmi) göstermek için kullanıyoruz.

Arka plan resmini yenisiyle değiştirmeyi unutmayın. Bu durumda, aynı kişinin farklı bir portresini kullanıyorum.

Tamamlandığında, ön kart görüntü modülünü sütun 1'e sürükleyin. Arka kartı tamamen kaplamalıdır.

Özel Kod

Son adım, tıklamada kartvizit çevirme animasyonunu gerçekten yapma işlevselliğini tamamlamak için bazı özel CSS ve JQuery eklemektir.

Kodu eklemek için, 1. sütundaki sosyal medya takip modülünün altına bir kod modülü ekleyin.

Özel CSS

Aşağıdaki CSS kodunu stil etiketleri arasına yapıştırın:

.card-column {
  perspective: 1400px;
}
.front-card:hover {
  cursor: pointer;
}

.front-card,
.back-card {
  transition: all 500ms ease-in-out;
  transform-style: preserve-3d;
}

.back-card {
  transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .back-card {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .front-card {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 50% 50%;
}

.card-content {
  transition: all 300ms ease-out 0ms;
}

.divi-transform-active .card-content {
  transition: all 300ms ease-out 500ms;
  opacity: 1 !important;
}

.divi-transform-active .front-card {
  opacity: 0;
  visibility: hidden;
}

JQuery

CSS altında, aşağıdaki JQuery'yi komut dosyası etiketleri arasına yapıştırın

(function ($) {
  $(document).ready(function () {
    $cardColumn = $(".card-column");
    $cardContent = $(".card-content");

    $cardContent.css("opacity", "0");

    $cardColumn.on("click", function (e) {
      $(this).addClass("divi-transform-active");
      e.stopPropagation();
    });
    $(document).on("click", function (e) {
      if ($(e.target).is($cardColumn) === false) {
        $cardColumn.removeClass("divi-transform-active");
      }
    });
  });
})(jQuery);

Ek Kartvizitler Oluşturma

Ek kartvizitler oluşturmak için tek yapmanız gereken, onu oluşturmak için kullandığımız tüm modülleri içeren sütunu çoğaltmak. Sütunu çoğalttığınızda, fazladan kod modülünü silmeniz gerekecektir. Yinelenen kodlu iki kod modülüne sahip olmak işe yaramaz.

Sütun/kart çoğaltıldığında, yeni bir kartvizit için gerektiğinde modülleri kullanarak arka plan resimlerini ve kart içeriğini güncellemeniz yeterlidir.

Son sonuç

İşte tıklamada çevirme animasyonu ile kartvizit tasarımının nihai sonucu. Ön kart resmine tıkladığınızda, döner ve kaybolur, arka kart ayırıcı da döner ancak görünür kalır. Çevirme animasyonu tamamlandıktan sonra kart bilgileri kaybolur. Kartı ters çevirmek için tek yapmanız gereken kartı içeren sütunun dışına tıklamak. Kartı tıklatırken (bir geçiş gibi) kartın tekrar çevrilmesini istemedim, böylece kullanıcı kart içindeki öğelere tıklayabilir.

Son düşünceler

Umarım bu etkileşimli kartvizit tasarımı, web sitenizdeki ekip üyesi bölümünüzü veya sayfalarınızı nasıl görüntüleyeceğiniz konusunda daha yaratıcı olmanıza yardımcı olur. Aslında bu teknik kartvizitlerle sınırlı değildir. Görüntülemek istediğiniz herhangi bir bilgi için kullanabilirsiniz. Deneyin ve bir sonraki projeniz için uygun olup olmadığını görün.

Yorumlarda sizden haber bekliyorum.

Şerefe!