CTA “Başlangıç” Yapın;yüzerken birkaç seçeneği gösteren
Birçok şirket oradaki verandada CTA “başlangıç” içerecek. Genellikle bu, sayfada hareket etmek için ana davettir, çünkü bu kullanıcıyı bir tür amaçlanan süreçle yönlendirecektir. Bu, başka bir sayfaya bağlanan basit bir “bundan sonra açık” düğmesi olabilir. Veya, şirketin istediği süreci başlatmak için kullanıcı tarafından alınabilecek “Talimatlar ve/veya farklı seçenekleri içeren sayfanın bir parçası olabilir. Bu öğreticide, imleci yönlendirirken birkaç “başlangıç” seçeneği görüntüleyecek olan CTA “Başlatma” nı nasıl göstereceğinizi göstereceğiz. Divi kullanarak bölümü büyük bir düğme olarak görünecek şekilde tasarlayacağız. Ardından, imleci düğmeye işaret ederken, seçenek bir sonraki slaytı açacak dikey bir kayma gibi görünecektir.
Tasarım zariftir ve işlevi birçok yönden yararlı olabilir. Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız CTA “başlayan” bir bakış.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. CTA tasarımını Divi’de “Burada Başlamak” ı uygularken, bu tasarımın arkasındaki temel fikir, imleci o bölüme yönlendirirken üst içeriği taşımaktır. Bunu yapmak için, gizli taşma ile sabit bir yüksekliğe sahip olduğumuzdan emin olmalıyız. Bu, Hover durumundan önce CTA seçeneğini gizleyecektir. Ardından, içeriği yüzerken ekrana taşımak için modülümüzü ve üst dolgumuzu konumlandırmak için marj kullanabiliriz.
Bölümle başlayalım. Parçaları başlatmak için yapın, bir sütun satırı ile düzenli bölümü yapın. Ardından, herhangi bir modül eklemeden önce bölümün ayarlarını güncelleyelim. Aşağıdaki bölüm ayarlarını açın ve güncelleme: Arka plan rengi: #2B87DA Genişlik:% 90 Maks. Genişlik: 1100px Bölüm Seviyelendirme: Orta Kenar: 6VW üst, 6VW daha düşük (sadece nefes almak için biraz yer vermek için) Dolgu (masaüstü): 300px üst, 0px Alt Dolgu (Tablet): 0px üst,% 15 daha düşük ve ardından birkaç yuvarlak açı ekleyin. Bu, maksimum yükseklik parçasını her verdiğimizde düğmemiz gibi bir tasarım yapacaktır.
Yuvarlak açı: 140 piksel (masaüstü), 20px (imleci işaret), 10px (tablet) sonra kutunun gölgesini verin (bkz. Ekran görüntüleri). Şu anda son tasarım için gereken tüm ayarları eklemeyeceğiz. Geri dönmeli ve kalıcı bir yükseklik ve yüzen etki vermeliyiz. Ama şimdilik içeriği ekleyelim. İlk içerik satırını 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 satır sütunda metin modülünü ekleyin. Ardından, vücut içeriğine aşağıdaki H2 başlığını ekleyin.
Yükseklik 300 piksel ve üst kenar -300 piksel, 300 piksel üst dolguyu doldurmak için bir metin modülü taşıyan. Daha sonra imleci yönlendirirken üst dolguyu her çıkardığımızda, metin modülü bu bölümün üstünde yukarı kaydırır. İkinci sıra içeriğinin ikinci satırını CTA seçeneğimizi ekleyeceğimiz yerdir. Devam edin ve üç sütunlu yeni bir satır ekleyin. Ardından satır ayarlarını aşağıdaki gibi güncelleyin: Genişlik:% 100 maks.
Blurb’a bir bağlantı ekleyin ve yüzerken dağıtın, açıklamamız gerçekten bir daire düğmesi olarak işlev gördüğü için, her bir açıklamaya modül bağlantı URL’si eklememiz gerekir. Tabii ki kendinizi ihtiyaçlarınıza göre eklemeniz gerekiyor. Açıklama görsel yapımcıya gizlendiğinden, çerçeve görüntü görüntüleme modunu değiştirin ve açıklamanın her ayarlarını modül bağlantısı URL’si ile güncelleyin. Ardından Frame görüntü görüntüleme modunda kalın ve üç açıklamayı seçmek için MultiSect kullanın. Ve Ayarları Açın Üçünün de öğe ayarlarını güncellemek için açıklamalardan biri. Ardından Dönüşüm seçeneğini aşağıdaki gibi güncelleyin: Dönüşüm Ölçeği (nokta imleci):% 105 İşte burada! Nihai sonuç, CTA “başlangıç” nın son tasarımına bakalım. Ve bu tabletler ve cep telefonları üzerindeki tasarım. CTA’nın son zihni “başladı” şu anda web’de yaygındır. Umarım bu öğretici bir sonraki seviyeye getirmenize yardımcı olur. Ve bu işlevi kullanmanın diğer birkaç yolunu düşünmekten korkmayın. Bunu bir düşün. Bu bölüme istediğiniz içeriği ekleyebilirsiniz! Düşüncelerinizi aşağıdaki yorumlarda paylaşmaktan çekinmeyin. Sizden haberleri duymayı umuyorum. Kızarmış ekmek!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. CTA tasarımını Divi’de “Burada Başlamak” ı uygularken, bu tasarımın arkasındaki temel fikir, imleci o bölüme yönlendirirken üst içeriği taşımaktır. Bunu yapmak için, gizli taşma ile sabit bir yüksekliğe sahip olduğumuzdan emin olmalıyız. Bu, Hover durumundan önce CTA seçeneğini gizleyecektir. Ardından, içeriği yüzerken ekrana taşımak için modülümüzü ve üst dolgumuzu konumlandırmak için marj kullanabiliriz.
Bölümle başlayalım. Parçaları başlatmak için yapın, bir sütun satırı ile düzenli bölümü yapın. Ardından, herhangi bir modül eklemeden önce bölümün ayarlarını güncelleyelim. Aşağıdaki bölüm ayarlarını açın ve güncelleme: Arka plan rengi: #2B87DA Genişlik:% 90 Maks. Genişlik: 1100px Bölüm Seviyelendirme: Orta Kenar: 6VW üst, 6VW daha düşük (sadece nefes almak için biraz yer vermek için) Dolgu (masaüstü): 300px üst, 0px Alt Dolgu (Tablet): 0px üst,% 15 daha düşük ve ardından birkaç yuvarlak açı ekleyin. Bu, maksimum yükseklik parçasını her verdiğimizde düğmemiz gibi bir tasarım yapacaktır.
Yuvarlak açı: 140 piksel (masaüstü), 20px (imleci işaret), 10px (tablet) sonra kutunun gölgesini verin (bkz. Ekran görüntüleri). Şu anda son tasarım için gereken tüm ayarları eklemeyeceğiz. Geri dönmeli ve kalıcı bir yükseklik ve yüzen etki vermeliyiz. Ama şimdilik içeriği ekleyelim. İlk içerik satırını 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 satır sütunda metin modülünü ekleyin. Ardından, vücut içeriğine aşağıdaki H2 başlığını ekleyin.
Buraya başlayın …
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 Renk Metin: #FFFFFFFFFFFe Metin Boyutu: 78px (Masaüstü ve Tablet), 46px (Cep Telefonu) Maksimum genişlik: 500px yükseklik: 300px (masaüstü. ), otomatik (tablet ve cep telefonu) marj: -300px üst (masaüstü), 0px üst (tablet ve mobil) dolgu:% 7 üstYükseklik 300 piksel ve üst kenar -300 piksel, 300 piksel üst dolguyu doldurmak için bir metin modülü taşıyan. Daha sonra imleci yönlendirirken üst dolguyu her çıkardığımızda, metin modülü bu bölümün üstünde yukarı kaydırır. İkinci sıra içeriğinin ikinci satırını CTA seçeneğimizi ekleyeceğimiz yerdir. Devam edin ve üç sütunlu yeni bir satır ekleyin. Ardından satır ayarlarını aşağıdaki gibi güncelleyin: Genişlik:% 100 maks.
Ardından Sütun 1’e açıklama modülünü ekleyin.
Ardından bulanıklık ayarını aşağıdaki gibi güncelleyin: Varsayılan içerik metnini kaldırın ve başlığı bırakın. Ardından görüntü simgesini (90 x 90) ekleyin. Veya isterseniz sıradan bir divi simgesi kullanabilirsiniz. Arka plan ekleyin ve tasarım metni tasarımını güncelleyin. Arka plan rengi: #ffffff yazı tipi Başlık: Nunito Heavy Yazı Tipi Başlık: Ultra Kalın Yazı Tipi Başlık Tarzı: TT Tesviye Metin Başlığı: Orta Başlık Metin Renk: #2B87DA Metin Boyutu Başlık: 14px Dairesel bir bulanıklık yapmadan önce, önce aynı yükseklik ve genişliğe sahip bulanık vermemiz gerekir. Sonra ortada bulanıklık ve bulanık içeriği uyumlu hale getirmek için boşluklar kullanabiliriz. İçerik genişliği: 200 piksel (masaüstü), 250 piksel (tablet) genişlik: 250 piksel (masaüstü), 300 piksel (tablet) Modül Hizalama: Orta Yüksek: 250 piksel (masaüstü), 300 piksel (tabletler) Marj: 25px üst, 0px Dolgu altında: 50px üst (masaüstü), 75px üst (tablet ve cep telefonu) Daire tasarımını tamamlamak için yuvarlak açılı bir bulanıklık ve kutunun gölgesi verin. Yuvarlak açı:% 50 Gölge Kutusu: Ekran yakalamaya bakın Bu ilk açıklamamızı ele alıyor. Sonraki ikisini yapmak için. Açıklamayı kopyalayın ve sütun 2 ve sütun 3’e yapıştırın. Ardından her biri için görüntü simgesini güncelleyin. Aşağıdakiler gibi görünmelidir: “Başlangıç” CTA tasarımını tamamlamak için bölüme son dokunuş, bu 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 cep telefonu) Yatay taşma: Gizli Dikey Taşma: Gizli Bu, satır 1 ve satır 2’deki içerikle aynı parçanın yüksekliğini koruyacaktır. 2 satırdaki içerik imleci yönlendirirken görüntülenene kadar gizli kalın. Satır içeriği 2 görüntülemek için imleci yönlendirirken parçayı kaldırmamız gerekir. Dolgu (nokta imleci): 0px üst Şimdi sonuçlara bakın. İçerik, üç CTA seçeneğini gösteren satır 2’de içeriği ortaya çıkarmak için yukarı kaydırır. Bölümün daha çok bir düğmeye benzemesini sağlamak için, onu azaltmak için Dönüşüm seçeneğini kullanabilir ve daha sonra imleci yönlendirirken normal boyuta döndürebiliriz. Bölüm için aşağıdaki dönüşüm seçeneklerini güncelleyin. Dönüşüm Ölçeği (Masaüstü):% 70 Dönüşüm Ölçeği (nokta imleci):% 100 Dönüşüm Ölçeği (Tablet):% 100 Şimdi doğru boyutu almak için bir arka plan görüntü grafiği (500 x 500) ekleyin. Arka Plan Görüntü: Görüntü Görüntü Ekle Arka Plan Görüntü: Gerçek Boyut Konumu Arka Plan Görüntü: Sağ orta (masaüstü), sağ üst (tablet), sol üst (cep telefonu)Blurb’a bir bağlantı ekleyin ve yüzerken dağıtın, açıklamamız gerçekten bir daire düğmesi olarak işlev gördüğü için, her bir açıklamaya modül bağlantı URL’si eklememiz gerekir. Tabii ki kendinizi ihtiyaçlarınıza göre eklemeniz gerekiyor. Açıklama görsel yapımcıya gizlendiğinden, çerçeve görüntü görüntüleme modunu değiştirin ve açıklamanın her ayarlarını modül bağlantısı URL’si ile güncelleyin. Ardından Frame görüntü görüntüleme modunda kalın ve üç açıklamayı seçmek için MultiSect kullanın. Ve Ayarları Açın Üçünün de öğe ayarlarını güncellemek için açıklamalardan biri. Ardından Dönüşüm seçeneğini aşağıdaki gibi güncelleyin: Dönüşüm Ölçeği (nokta imleci):% 105 İşte burada! Nihai sonuç, CTA “başlangıç” nın son tasarımına bakalım. Ve bu tabletler ve cep telefonları üzerindeki tasarım. CTA’nın son zihni “başladı” şu anda web’de yaygındır. Umarım bu öğretici bir sonraki seviyeye getirmenize yardımcı olur. Ve bu işlevi kullanmanın diğer birkaç yolunu düşünmekten korkmayın. Bunu bir düşün. Bu bölüme istediğiniz içeriği ekleyebilirsiniz! Düşüncelerinizi aşağıdaki yorumlarda paylaşmaktan çekinmeyin. Sizden haberleri duymayı umuyorum. Kızarmış ekmek!
