Divi için ücretsiz CTA sütununun kahramanlarının tasarımını indirin
Sayfanızın kahramanları alabileceği tüm ilgiyi hak ediyor. Web sitenizin ne olduğuna ve hedef kitlenizin davranışlarının nasıl olduğuna bağlı olarak kahramanlarınızı düzenlemenin birçok yolu vardır. Bazı web siteleri için, olağanüstü deneyimler oluşturmadan bazı sütun CTA kartları yerleştirilmesi için yararlı olacaktır. Ona yaklaşmanın iyi bir yolu bir CTA Swipe sütun kartı yapmaktır. Bugünün Divi öğreticisinde, bu tekniği işleyen baştan nasıl inanılmaz bir tasarım yapacağınızı göstereceğiz. JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Haydi Yapalım şunu.
Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
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.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanallarımız Yaratıcı başlayalım! Gradyan arka planının yeni bir kısmını ekleyin Üzerinde çalıştığınız sayfaya yeni bir parça ekleyin, parçanın ayarlarını açın ve gradyanın arka planını girin.
Renk 1: #ffffff
Renk 2: #F5EDE5
Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 17
Son pozisyon:% 17
Mesafe Tasarım sekmesine geçer ve özellikle çeşitli ekran boyutlarına üst ve alt rulmanlar ekler. Üst Dolgu: 5VW (masaüstü), 10vw (tablet), 13VW (Telefon)
Aşağıda dolgu: 5VW (masaüstü), 10vw (tablet), 13VW (telefon)
Sıra #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve arka plan rengini değiştirin. Arka plan rengi: #fff6ed
Yapıştırıcı tasarım sekmesine geçti ve satır boyutu ayarlarını da değiştirdi. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik: 60VW (masaüstü),% 100 (tablet ve cep telefonu)
Maksimum genişlik:% 100
Satır Hizalama: Doğru
Mesafemiz ayrıca boşluk ayarlarına bazı özel dolgu değerleri ekler. Üst Dolgu: 6VW
Dolgu Alt: 6VW
Sol dolgu: 5.5vw
Doğru dolgu: 24VW
Sınır Bir sonraki sınır ayarlarını açın ve aşağıdaki ayarları kullanarak sol limiti ekleyin: Sol sınır genişliği: 6px
Sol sınır rengi: #ffffff
Kutunun gölgesi, kahramanda bir derinlik yaratmak için pürüzsüz bir kutunun gölgesini ekler. Bulanık Güç Gölgesi Kutusu: 100 PX
Gölge Rengi: RGBA (0.0,0,0.22)
CSS sınıfı ve CSS sınıfını Gelişmiş sekmesinde kullanın. Bu yazının ilerleyen saatlerinde, Scrollbar’ı gizlemek için bu CSS sınıfını kullanacağız. CSS Sınıfı: Kayan-Scrollbar Yatay kaydırma/kaydırma oluşturmanın ana öğesi, sütunu yatay olarak yerleştirmemiz gerekir. Bunu, hattın ana öğelerine bazı özel CSS kodu ekleyerek yapacağız.
Ekran: ızgara; Izgara-TEMPLATE sütunları: Tekrar (6,%100);
Izgara sütun boşluğu: 2VW;
Taşma, görünürlük ayarlarına geçer ve satır taşmasını değiştirir.
Yatay taşma: kaydırma Dikey taşma: gizli
Sütun Ayarları Satır ayarlarını tamamladıktan sonra, ilk sütun ayarlarını açabilirsiniz.
Gradyan Arka Plan, gradyanın arka planını ekleyin. Renk 1: RGBA (245,237,229.0.91) Renk 2: RGBA (219,34,65,0,84)
Başlangıç Pozisyonu:% 35
Son pozisyon:% 81
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Arka plan görüntüsü ile birlikte arka plan görüntüsü.
Arka Plan Görüntü Boyutu: Kapak Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Mesafe tasarım sekmesine geçer ve çeşitli ekran boyutlarına bazı özel dolgu değerleri ekler.
Üst Pilding: 4VW (masaüstü), 10vw (tablet), 12vw (telefon) Dolgu Alt: 4VW (masaüstü), 10vw (tablet), 12VW (Telefon)
Sol dolgu: 2VW (masaüstü), 5VW (tablet), 7vw (telefon)
Sağ dolgu: 2VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Sınır ayarındaki her açıya ’20px’ sınır yarıçapını ekleyerek sınırlama devam edin.
Bu işi yapmanın bir başka önemli kısmının ana öğesi, sütunun ana öğesine bir satır CSS kodu eklemektir. Genişlik:%100! Önemli; Sütun 1’e Metin Modülü #1 ekleyin Modül eklemeye başlamak için H3 içerik süresi ekleyin! İstediğiniz kadar modül ekleyebilir ve isteklerinize göre düzenleyebilirsiniz. Ancak, bu yayının önizlemesinde paylaşılan aynı örneği yeniden oluşturmak istiyorsanız, metin modülüyle başlayın ve bazı H3 içeriği girin. H3 Metin Ayarları Tasarım sekmesine geçin ve uygun H3 metin ayarlarını değiştirin: Başlık 3 Yazı Tipi: Poppins Başlık 3 Yazı Tipi Ağırlığı: Işık Başlık 3 Renk Metni: #E92640
Başlık 3 Metin Boyutu: 1.5VW (masaüstü), 3.5vw (tablet), 4.5vw (telefon)
Sütun 1’e Metin Modülü #2 ekleyin, İhtiyacımız olan bir sonraki modülün içeriğini ekleyin Başka bir metin modülü. Seçtiğiniz bazı paragraf içerikleri girin.
Metin Ayarları Sonraki metin ayarlarını açın ve bazı değişiklikler yapın.
Metin Yazı Tipi: Poppins Metin yazı tipi ağırlığı: ışık Metin rengi: #e92640
Metin Boyutu: 0.8VW (masaüstü), 1.9vw (tablet), 2.8vw (telefon)
Mesafemiz ayrıca sütun sürtünme kartımızda odayı yapmak için bazı alt kenar boşluklarını da ekledi.
Alt kenar boşluğu: 18VW (masaüstü), 30VW (tablet), 42VW (Telefon)
Düğme modülünü Sütun 1’e ekleyin Bir sonraki modüle, düğme modülüne bir kopya ekleyin. Seçtiğiniz bazı kopyaları girin. Taşıma düğmesini Tasarım sekmesine ayarlar ve uygun düğme ayarlarını değiştirin:
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 0.8VW (Masaüstü), 1.8VW (Tablet), 2.5VW (Telefon) Metin Renk Düğmesi: #F5EDE5
Sınır sınır genişliği: 1px
Düğme Sınır Rengi: #F5EDE5
Sınır sınır yarıçapı: 5px
Yazı tipi düğmesi: Poppins
Mesafe, çeşitli ekran boyutlarında bazı özel dolgu değerleri ekleyerek düğmenin boyutunu arttırır.
Üst Dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon)
Aşağıda dolgu: 1VW (masaüstü), 2vw (tablet), 3VW (telefon) Sol dolgu: 3VW (masaüstü), 5VW (tablet), 7vw (telefon) Sağ dolgu: 3VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Bölücü modülünü, ihtiyacımız olan bir sonraki modülün Sütun 1 görünürlüğüne ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
Hat tasarım sekmesine geçer ve çizginin rengini değiştirir.
Çizgi Rengi: #F5EDE5 Sütun 1’e Metin Modülü #3 ekleyin Bir sonraki içeriğin içeriğini ekleyin ve son olarak bu sütunda ihtiyacımız olan şey başka bir metin modülü. Seçtiğiniz bazı paragraf içerikleri girin.
Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin: Metin Yazı Tipi: Poppins
Metin yazı tipi ağırlığı: ışık Metin Rengi: #F5EDE5 Metin Boyutu: 0.8VW (masaüstü), 1.9vw (tablet), 2.8vw (telefon)
Yüksek çizgi metin: 2.3em
Mesafe biraz üst kenar boşlukları da ekleyin.
Üst Marj: 2VW
Sütunları 5 kez klonlama ve diğer CTA için tekrar kullanın Birinci sütunu ve içindeki tüm modülleri tamamladıktan sonra, görüntülemek istediğiniz sütunu kaç CTA kartının kaydırdığına bağlı olarak tüm sütunu 5 kez klonlayabilirsiniz. Bir düğme bağlantısı ile birlikte her bir kopya sütunu için tüm kopyaları değiştirdiğinizden emin olun.
İkinci sıraya satırlar #2 sütun yapısı ekleyin! Bu satırı bir öncekiyle örtüşmek için kullanacağız. Aşağıdaki sütun yapısını seçin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve uygun boyut ayarlarını ayarlayın:
Özel Talang genişliği kullanın: evet Talang genişliği: 1 Genişlik:% 100 Maksimum genişlik:% 100
Postun sonraki mesafesi, ihtiyacımız olan modülü ekleyeceğiz ve bir modül gibi görünmesini sağlamak için negatif üzerinde örtüşecekiz ilk satırın bir parçası. Bu, tasarımımızda yer almak için ikinci bir sıraya ihtiyacımız olmadığı anlamına gelir. Bu yüzden tüm üst ve alt sıra dolgusu varsayılanını siliyoruz.
Aşağıda dolgu: 0px
Sütun 1’e Metin Modülü #1 ekleyin H1 içeriği ekleyin, modül eklemeye başlama zamanı! İlk metin modülü ile başlayın ve seçtiğiniz bazı H1 içeriğini girin.
H1 Metin Ayarları Tasarım sekmesine geçin ve uygun H1 metin ayarlarını değiştirin: Yazı Tip Başlığı: Poppins
Başlık Metin Rengi: #E92741
Başlık Metin Boyutu: 3VW (Masaüstü), 5VW (Tablet), 7VW (Telefon) Mesafe Bir sonraki marj değerleri ekleyin. Üst kenar: -35vw (masaüstü), 7vw (tablet), 10vw (telefon)
Sol kenar boşluğu: 5VW
Doğru marj: 12vw
Sütun 1’e Metin Modülü #2 ekleyin İhtiyacımız olan ikinci modülün içeriğini ekleyin Başka bir metin modülü. Seçtiğiniz bazı paragraf içerikleri girin. Metin Ayarları Tasarım sekmesini açın ve uygun metin ayarlarını değiştirin:
Metin Yazı Tipi: Poppins
Metin yazı tipi ağırlığı: ışık
Metin rengi: #e92741 Metin Boyutu: 0.8VW (masaüstü), 1.9vw (tablet), 2.8vw (telefon) Yüksek çizgi metin: 2.8em
Mesafemiz ayrıca metin modülüne bazı özel marj değerleri ekler.
Üst kenar: 2VW (masaüstü), 7vw (tablet), 10vw (telefon)
Alt kenar boşluğu: 2VW (masaüstü), 7vw (tablet), 10vw (telefon)
Sol kenar boşluğu: 5VW
Sağ kenar boşluğu: 13VW (masaüstü), 5VW (tablet ve cep telefonu) Düğme Modülünü Sütun 1’e Ekleyin İhtiyacımız olan bir sonraki modülün bir kopyasını ekleyin Modül düğmesi. Seçtiğiniz bazı kopyaları girin.
Sonra düğmeyi ayarlayın, tasarım sekmesini açın ve stili düğmede verin. Düğme için özel stili kullanın: Evet
Metin Boyutu Düğmesi: 0.9VW
Metin Renk Düğmesi: #E92741
Arka Plan Renk Düğmesi: #F5EDE5 Düğmenin sınır genişliği: 0px Sınır sınır yarıçapı: 5px
Yazı tipi düğmesi: Poppins
Mesafemiz ayrıca bazı özel alan değerleri ekleyerek düğmenin boyutunu arttırır.
Üst Marj: 2VW
Sol kenar boşluğu: 5VW
Üst Dolgu: 1.5VW (masaüstü), 2.5vw (tablet), 3VW (Telefon)
Aşağıda dolgu: 1.5vw (masaüstü), 2.5vw (tablet), 3VW (telefon)
Sol dolgu: 6VW (masaüstü), 9vw (tablet), 15vw (telefon) Sağ dolgu: 6VW (masaüstü), 9vw (tablet), 15vw (telefon)
Kutunun gölgesi, düzgün bir kutu gölgesi ekleyerek düğme modülünün tasarımını tamamlar.
Dikey Konum Gölge Kutusu: 20px
Bulanık Güç Gölgesi Kutusu: 50px
Kutunun gölgesinin dağılımının gücü: -5px
Gölge Rengi: RGBA (0.0,0,0.19)
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.Masaüstü Hücresel
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanallarımız Yaratıcı başlayalım! Gradyan arka planının yeni bir kısmını ekleyin Üzerinde çalıştığınız sayfaya yeni bir parça ekleyin, parçanın ayarlarını açın ve gradyanın arka planını girin.
Renk 1: #ffffff
Renk 2: #F5EDE5
Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 17
Son pozisyon:% 17
Mesafe Tasarım sekmesine geçer ve özellikle çeşitli ekran boyutlarına üst ve alt rulmanlar ekler. Üst Dolgu: 5VW (masaüstü), 10vw (tablet), 13VW (Telefon)
Aşağıda dolgu: 5VW (masaüstü), 10vw (tablet), 13VW (telefon)
Sıra #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve arka plan rengini değiştirin. Arka plan rengi: #fff6ed
Yapıştırıcı tasarım sekmesine geçti ve satır boyutu ayarlarını da değiştirdi. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik: 60VW (masaüstü),% 100 (tablet ve cep telefonu)
Maksimum genişlik:% 100
Satır Hizalama: Doğru
Mesafemiz ayrıca boşluk ayarlarına bazı özel dolgu değerleri ekler. Üst Dolgu: 6VW
Dolgu Alt: 6VW
Sol dolgu: 5.5vw
Doğru dolgu: 24VW
Sınır Bir sonraki sınır ayarlarını açın ve aşağıdaki ayarları kullanarak sol limiti ekleyin: Sol sınır genişliği: 6px
Sol sınır rengi: #ffffff
Kutunun gölgesi, kahramanda bir derinlik yaratmak için pürüzsüz bir kutunun gölgesini ekler. Bulanık Güç Gölgesi Kutusu: 100 PX
Gölge Rengi: RGBA (0.0,0,0.22)
CSS sınıfı ve CSS sınıfını Gelişmiş sekmesinde kullanın. Bu yazının ilerleyen saatlerinde, Scrollbar’ı gizlemek için bu CSS sınıfını kullanacağız. CSS Sınıfı: Kayan-Scrollbar Yatay kaydırma/kaydırma oluşturmanın ana öğesi, sütunu yatay olarak yerleştirmemiz gerekir. Bunu, hattın ana öğelerine bazı özel CSS kodu ekleyerek yapacağız.
Ekran: ızgara; Izgara-TEMPLATE sütunları: Tekrar (6,%100);
Izgara sütun boşluğu: 2VW;
Taşma, görünürlük ayarlarına geçer ve satır taşmasını değiştirir.
Yatay taşma: kaydırma Dikey taşma: gizli
Sütun Ayarları Satır ayarlarını tamamladıktan sonra, ilk sütun ayarlarını açabilirsiniz.
Gradyan Arka Plan, gradyanın arka planını ekleyin. Renk 1: RGBA (245,237,229.0.91) Renk 2: RGBA (219,34,65,0,84)
Başlangıç Pozisyonu:% 35
Son pozisyon:% 81
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Arka plan görüntüsü ile birlikte arka plan görüntüsü.
Arka Plan Görüntü Boyutu: Kapak Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Mesafe tasarım sekmesine geçer ve çeşitli ekran boyutlarına bazı özel dolgu değerleri ekler.
Üst Pilding: 4VW (masaüstü), 10vw (tablet), 12vw (telefon) Dolgu Alt: 4VW (masaüstü), 10vw (tablet), 12VW (Telefon)
Sol dolgu: 2VW (masaüstü), 5VW (tablet), 7vw (telefon)
Sağ dolgu: 2VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Sınır ayarındaki her açıya ’20px’ sınır yarıçapını ekleyerek sınırlama devam edin.
Bu işi yapmanın bir başka önemli kısmının ana öğesi, sütunun ana öğesine bir satır CSS kodu eklemektir. Genişlik:%100! Önemli; Sütun 1’e Metin Modülü #1 ekleyin Modül eklemeye başlamak için H3 içerik süresi ekleyin! İstediğiniz kadar modül ekleyebilir ve isteklerinize göre düzenleyebilirsiniz. Ancak, bu yayının önizlemesinde paylaşılan aynı örneği yeniden oluşturmak istiyorsanız, metin modülüyle başlayın ve bazı H3 içeriği girin. H3 Metin Ayarları Tasarım sekmesine geçin ve uygun H3 metin ayarlarını değiştirin: Başlık 3 Yazı Tipi: Poppins Başlık 3 Yazı Tipi Ağırlığı: Işık Başlık 3 Renk Metni: #E92640
Başlık 3 Metin Boyutu: 1.5VW (masaüstü), 3.5vw (tablet), 4.5vw (telefon)
Sütun 1’e Metin Modülü #2 ekleyin, İhtiyacımız olan bir sonraki modülün içeriğini ekleyin Başka bir metin modülü. Seçtiğiniz bazı paragraf içerikleri girin.
Metin Ayarları Sonraki metin ayarlarını açın ve bazı değişiklikler yapın.
Metin Yazı Tipi: Poppins Metin yazı tipi ağırlığı: ışık Metin rengi: #e92640
Metin Boyutu: 0.8VW (masaüstü), 1.9vw (tablet), 2.8vw (telefon)
Mesafemiz ayrıca sütun sürtünme kartımızda odayı yapmak için bazı alt kenar boşluklarını da ekledi.
Alt kenar boşluğu: 18VW (masaüstü), 30VW (tablet), 42VW (Telefon)
Düğme modülünü Sütun 1’e ekleyin Bir sonraki modüle, düğme modülüne bir kopya ekleyin. Seçtiğiniz bazı kopyaları girin. Taşıma düğmesini Tasarım sekmesine ayarlar ve uygun düğme ayarlarını değiştirin:
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 0.8VW (Masaüstü), 1.8VW (Tablet), 2.5VW (Telefon) Metin Renk Düğmesi: #F5EDE5
Sınır sınır genişliği: 1px
Düğme Sınır Rengi: #F5EDE5
Sınır sınır yarıçapı: 5px
Yazı tipi düğmesi: Poppins
Mesafe, çeşitli ekran boyutlarında bazı özel dolgu değerleri ekleyerek düğmenin boyutunu arttırır.
Üst Dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon)
Aşağıda dolgu: 1VW (masaüstü), 2vw (tablet), 3VW (telefon) Sol dolgu: 3VW (masaüstü), 5VW (tablet), 7vw (telefon) Sağ dolgu: 3VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Bölücü modülünü, ihtiyacımız olan bir sonraki modülün Sütun 1 görünürlüğüne ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
Hat tasarım sekmesine geçer ve çizginin rengini değiştirir.
Çizgi Rengi: #F5EDE5 Sütun 1’e Metin Modülü #3 ekleyin Bir sonraki içeriğin içeriğini ekleyin ve son olarak bu sütunda ihtiyacımız olan şey başka bir metin modülü. Seçtiğiniz bazı paragraf içerikleri girin.
Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin: Metin Yazı Tipi: Poppins
Metin yazı tipi ağırlığı: ışık Metin Rengi: #F5EDE5 Metin Boyutu: 0.8VW (masaüstü), 1.9vw (tablet), 2.8vw (telefon)
Yüksek çizgi metin: 2.3em
Mesafe biraz üst kenar boşlukları da ekleyin.
Üst Marj: 2VW
Sütunları 5 kez klonlama ve diğer CTA için tekrar kullanın Birinci sütunu ve içindeki tüm modülleri tamamladıktan sonra, görüntülemek istediğiniz sütunu kaç CTA kartının kaydırdığına bağlı olarak tüm sütunu 5 kez klonlayabilirsiniz. Bir düğme bağlantısı ile birlikte her bir kopya sütunu için tüm kopyaları değiştirdiğinizden emin olun.
İkinci sıraya satırlar #2 sütun yapısı ekleyin! Bu satırı bir öncekiyle örtüşmek için kullanacağız. Aşağıdaki sütun yapısını seçin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve uygun boyut ayarlarını ayarlayın:
Özel Talang genişliği kullanın: evet Talang genişliği: 1 Genişlik:% 100 Maksimum genişlik:% 100
Postun sonraki mesafesi, ihtiyacımız olan modülü ekleyeceğiz ve bir modül gibi görünmesini sağlamak için negatif üzerinde örtüşecekiz ilk satırın bir parçası. Bu, tasarımımızda yer almak için ikinci bir sıraya ihtiyacımız olmadığı anlamına gelir. Bu yüzden tüm üst ve alt sıra dolgusu varsayılanını siliyoruz.
Aşağıda dolgu: 0px
Sütun 1’e Metin Modülü #1 ekleyin H1 içeriği ekleyin, modül eklemeye başlama zamanı! İlk metin modülü ile başlayın ve seçtiğiniz bazı H1 içeriğini girin.
H1 Metin Ayarları Tasarım sekmesine geçin ve uygun H1 metin ayarlarını değiştirin: Yazı Tip Başlığı: Poppins
Başlık Metin Rengi: #E92741
Başlık Metin Boyutu: 3VW (Masaüstü), 5VW (Tablet), 7VW (Telefon) Mesafe Bir sonraki marj değerleri ekleyin. Üst kenar: -35vw (masaüstü), 7vw (tablet), 10vw (telefon)
Sol kenar boşluğu: 5VW
Doğru marj: 12vw
Sütun 1’e Metin Modülü #2 ekleyin İhtiyacımız olan ikinci modülün içeriğini ekleyin Başka bir metin modülü. Seçtiğiniz bazı paragraf içerikleri girin. Metin Ayarları Tasarım sekmesini açın ve uygun metin ayarlarını değiştirin:
Metin Yazı Tipi: Poppins
Metin yazı tipi ağırlığı: ışık
Metin rengi: #e92741 Metin Boyutu: 0.8VW (masaüstü), 1.9vw (tablet), 2.8vw (telefon) Yüksek çizgi metin: 2.8em
Mesafemiz ayrıca metin modülüne bazı özel marj değerleri ekler.
Üst kenar: 2VW (masaüstü), 7vw (tablet), 10vw (telefon)
Alt kenar boşluğu: 2VW (masaüstü), 7vw (tablet), 10vw (telefon)
Sol kenar boşluğu: 5VW
Sağ kenar boşluğu: 13VW (masaüstü), 5VW (tablet ve cep telefonu) Düğme Modülünü Sütun 1’e Ekleyin İhtiyacımız olan bir sonraki modülün bir kopyasını ekleyin Modül düğmesi. Seçtiğiniz bazı kopyaları girin.
Sonra düğmeyi ayarlayın, tasarım sekmesini açın ve stili düğmede verin. Düğme için özel stili kullanın: Evet
Metin Boyutu Düğmesi: 0.9VW
Metin Renk Düğmesi: #E92741
Arka Plan Renk Düğmesi: #F5EDE5 Düğmenin sınır genişliği: 0px Sınır sınır yarıçapı: 5px
Yazı tipi düğmesi: Poppins
Mesafemiz ayrıca bazı özel alan değerleri ekleyerek düğmenin boyutunu arttırır.
Üst Marj: 2VW
Sol kenar boşluğu: 5VW
Üst Dolgu: 1.5VW (masaüstü), 2.5vw (tablet), 3VW (Telefon)
Aşağıda dolgu: 1.5vw (masaüstü), 2.5vw (tablet), 3VW (telefon)
Sol dolgu: 6VW (masaüstü), 9vw (tablet), 15vw (telefon) Sağ dolgu: 6VW (masaüstü), 9vw (tablet), 15vw (telefon)
Kutunun gölgesi, düzgün bir kutu gölgesi ekleyerek düğme modülünün tasarımını tamamlar.
Dikey Konum Gölge Kutusu: 20px
Bulanık Güç Gölgesi Kutusu: 50px
Kutunun gölgesinin dağılımının gücü: -5px
Gölge Rengi: RGBA (0.0,0,0.19)
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.Masaüstü Hücresel
