Hover'da Birden Fazla Seçeneği Gösteren Bir "Başlarken" CTA Oluşturma

Birçok şirket, ana sayfaya bir "başlangıç" CTA'sı ekler. Kullanıcıyı bir tür amaçlanan süreç boyunca yönlendireceğinden, genellikle sayfadaki birincil harekete geçirici mesajdır. Başka bir sayfaya bağlantı veren basit bir "şimdi başlayın" düğmesi olabilir. Veya bir sayfanın "başlangıç" talimatlarını ve/veya kullanıcının şirket tarafından amaçlanan süreci başlatmak için kullanabileceği farklı seçenekleri içeren bir bölümü olabilir.

Bu eğitimde, fareyle üzerine gelindiğinde birden çok "Başlarken" seçeneğini gösterecek bir "Başlarken" CTA'nın nasıl oluşturulacağını göstereceğiz. Divi'yi kullanarak, büyük bir düğme olarak görünecek bir bölüm tasarlayacağız. Ardından, düğmenin üzerine geldiğinizde, seçenekler dikey bir kaydırıcının sonraki slaydı ortaya çıkaracağı gibi görünecektir.

Tasarım zarif ve işlevsellik birçok yönden faydalı olabilir.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız “Başlarken” CTA'sına hızlı bir bakış.

"Başlayın" CTA Divi Düzenini ÜCRETSİZ olarak indirin

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

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Hadi öğreticiye geçelim mi?

Başlamak için Gerekenler

Başlamak için aşağıdakilere sahip olmanız gerekir:

1. Divi Teması yüklü ve etkin
2. Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
3. Sahte içerik için kullanılacak resimler

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

Divi'de “Buradan Başlayın” CTA Tasarımını Uygulama

Bu tasarımın arkasındaki temel fikir, bölümün üzerine gelindiğinde bölümün içeriğini yukarı doğru taşımaktır. Bunu yapmak için, bölümümüzün taşma gizli olarak sabit bir yüksekliğe sahip olduğundan emin olmamız gerekir. Bu, fareyle üzerine gelme durumundan önce CTA seçeneklerini gizleyecektir. Ardından, modüllerimizi konumlandırmak için kenar boşluğunu ve içeriği fareyle üzerine gelindiğinde görünüme taşımak için üst dolguyu kullanabiliriz.

Bölümle başlayalım.

Bölüm Oluşturma

İşleri başlatmak için tek sütunlu bir satır içeren normal bir bölüm oluşturun. Ardından herhangi bir modül eklemeden önce bölüm ayarlarını güncelleyelim.

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Rengi: #2b87da
Genişlik: %90
Maksimum Genişlik: 1100 piksel
Bölüm Hizalama: merkez
Marj: 6vw üst, 6vw alt (sadece biraz nefes alması için)
Dolgu (masaüstü): 300 piksel üst, 0 piksel alt
Dolgu (tablet): 0 piksel üst, %15 alt

Sonra bazı yuvarlak köşeler ekleyin. Bu, bölüme maksimum yükseklik verdiğimizde düğme benzeri tasarımımızı yaratacaktır.

Yuvarlatılmış Köşeler: 140 piksel (masaüstü), 20 piksel (vurgulu), 10 piksel (tablet)

Ardından bir kutu gölgesi verin (ekran görüntüsüne bakın).

Bu noktada nihai tasarım için gerekli tüm ayarları eklemeyeceğiz. Geri dönüp ona sabit bir yükseklik ve havada asılı kalma efekti vermemiz gerekecek. Ama şimdilik içeriği ekleyelim.

İlk İçerik Satırını Oluşturma

Oluşturduğunuz bir sütun satırı için ayarları açın ve aşağıdakileri güncelleyin:

Genişlik: %100
Dolgu: 0px üst, 0px alt, %5 sol, %5 sağ

Bir sütun satırının içine bir metin modülü ekleyin.

Ardından gövde içeriğine aşağıdaki h2 başlığını ekleyin.

<h2>Get Started Here...</h2>

Tasarım ayarlarını aşağıdaki gibi güncelleyin:

Başlık 2 Yazı Tipi: Nunito
Başlık 2 Yazı Tipi Ağırlığı: Kalın
Başlık 2 Metin Rengi: #ffffff
Başlık 2 Metin Boyutu: 78px(masaüstü ve tablet), 46px(telefon)
Maksimum Genişlik: 500 piksel
Yükseklik: 300 piksel (masaüstü), otomatik (tablet ve telefon)
Kenar boşluğu: -300 piksel üst (masaüstü), 0 piksel üst (tablet ve telefon)
Dolgu: %7 üst

300 piksel yükseklik ve -300 piksel üst kenar boşluğu, metin modülünü bölümün 300 piksel üst dolgusunu dolduracak şekilde yukarı getirir. Daha sonra, fareyle üzerine gelindiğinde üst bölüm dolgusunu kaldırdığımızda, metin modülü bölümün yukarısına doğru kayar.

İkinci İçerik Satırını Oluşturma

İkinci içerik satırı, CTA seçeneklerimizi ekleyeceğimiz yerdir. Devam edin ve üç sütunlu bir düzen ile yeni bir satır ekleyin.

Ardından satır ayarlarını aşağıdaki gibi güncelleyin:

Genişlik: %100
Maksimum Genişlik: %100
Dolgu: 0 piksel üst, 0 piksel alt

Ardından, sütun 1'e bir tanıtıcı modül ekleyin.

Ardından, bulanıklık ayarlarını aşağıdaki gibi güncelleyin:

Varsayılan gövde metnini çıkarın ve Başlığı bırakın.

Ardından bir resim simgesi ekleyin (90 X 90). Veya isterseniz normal bir Divi simgesi kullanabilirsiniz.

Bir arka plan ekleyin ve başlık metninin tasarımını güncelleyin.

Arka Plan Rengi: #ffffff
Başlık Yazı Tipi: Nunito
Başlık Yazı Tipi Ağırlığı: Ultra Kalın
Başlık Yazı Tipi Stili: TT
Başlık Metni Hizalama: Orta
Başlık Metin rengi: #2b87da
Başlık Metin Boyutu: 14px

Tanıtım yazısını dairesel hale getirmeden önce tanıtım yazısına eşit bir yükseklik ve genişlik vermemiz gerekiyor. Ardından, tanıtıcı ve tanıtıcı içeriği merkezde hizalamak için boşluk kullanabiliriz.

İçerik Genişliği: 200px(masaüstü), 250px(tablet)
Genişlik: 250 piksel (masaüstü), 300 piksel (tablet)
Modül Hizalaması: merkez
Yükseklik: 250 piksel (masaüstü), 300 piksel (tablet)
Kenar boşluğu: 25 piksel üst, 0 piksel alt
Dolgu: 50 piksel üst (masaüstü), 75 piksel üst (tablet ve telefon)

Daire tasarımını tamamlamak için tanıtım yazısına yuvarlak bir köşe ve kutu gölgesi verin.

Yuvarlatılmış Köşeler: %50
Kutu Gölgesi: ekran görüntüsüne bakın

Bu, ilk tanıtım yazımızla ilgilenir. Sonraki ikisini oluşturmak için. Açıklamayı kopyalayın ve 2. ve 3. sütuna yapıştırın. Ardından, her biri için resim simgesini güncelleyin. Aşağıdaki gibi görünmelidir:

Bölüme Son Dokunuşlar

“Başlayın” CTA tasarımını tamamlamak için bölümü biraz daha güncellememiz gerekiyor. Aşağıdaki bölüm ayarlarını güncelleyin:

Yükseklik: 300 piksel (masaüstü), otomatik (tablet ve telefon)
Yatay Taşma: gizli
Dikey Taşma: gizli

Bu, bölümü 1. satır ve 2. satırdaki içerikle aynı yükseklikte tutacaktır. Taşmanın gizlenmesi, biz fareyle üzerine gelindiğinde görüntülenene kadar 2. satırdaki içeriği gizli tutacaktır.

2. satırın içeriğini görüntülemek için, fareyle üzerine gelindiğinde bölümün üst dolgusunu çıkarmamız gerekiyor.

Dolgu (vurgulu): 0 piksel üst

Şimdi şimdiye kadarki sonucu kontrol edin. İçerik, üç CTA seçeneğini gösteren 2. satırdaki içeriği ortaya çıkarmak için yukarı kaydırılacaktır.

Bölümün daha çok bir düğme gibi görünmesini sağlamak için, dönüştürme seçeneklerini kullanarak onu küçültebilir ve ardından üzerine gelindiğinde normal boyuta geri getirebiliriz. Bölüm için aşağıdaki dönüştürme seçeneklerini güncelleyin.

Dönüştürme Ölçeği (masaüstü): %70
Ölçeği Dönüştür (fareyle üzerine gelin): %100
Dönüştürme Ölçeği (tablet): %100

Şimdi bölümün doğru boyutunu almak için bir arka plan görüntüsü grafiği (500 X 500) ekleyin.

Arka Plan Resmi: resim ekle
Arka Plan Resmi Boyutu: gerçek boyut
Arka Plan Resmi Konumu: Sağ Orta (masaüstü), Sağ üst (tablet), Sol üst (telefon)

Blurb'lara Bağlantı URL'leri Ekleme ve Vurgulu Üzerinde Ölçeklendirme

Tanıtım yazılarımız gerçekten daire düğmeleri olarak hizmet ettiğinden, tanıtım yazılarının her birine modül bağlantı URL'leri eklememiz gerekiyor. Elbette ihtiyaçlarınıza göre kendinizinkini eklemeniz gerekecek.

Tanıtım yazıları görsel oluşturucuda gizlendiğinden, tel çerçeve görüntüleme modunu değiştirin ve tanıtım bilgilerinin her birini modül bağlantı URL'si ile güncelleyin.

Ardından tel çerçeve görünümü modunda kalın ve üç tanıtım yazısının tümünü seçmek için çoklu seçimi kullanın. Üçünün de öğe ayarlarını güncellemek için tanıtım yazılarından birinin ayarlarını açın. Ardından dönüştürme seçeneğini aşağıdaki gibi güncelleyin:

Dönüştürme Ölçeği (fareyle üzerine gelme): %105

Bu kadar!

Nihai Sonuç

"Başlarken" CTA'nın son tasarımını kontrol edelim.

Ve işte tablet ve telefondaki tasarım.

Son düşünceler

“Başlayın” CTA'sı bugün web'de yaygındır. Umarım, bu eğitim bir sonraki seviyeye geçmenize yardımcı olacaktır. Ve bu işlevi kullanmanın başka yollarını düşünmekten korkmayın. Bunu düşün. Bölüme istediğiniz içeriği ekleyebilirsiniz!

Düşüncelerinizi aşağıdaki yorumlarda paylaşmaktan çekinmeyin.

Cevabınızı sabırsızlıkla bekliyorum.

Şerefe!