Divi ile Sanal Zirve Açılış Sayfası Nasıl Oluşturulur
Yayınlanan: 2020-07-02Sanal bir etkinliğin tanıtımını yapmak, bir dizi tanıtım stratejisini içerir. Davetkar bir açılış sayfası oluşturmak bunlardan biridir. Sanal zirveniz için bir açılış sayfası oluşturmak, hedef kitlenizi meraklandırmanın mükemmel bir yoludur. Doğru bölüm kombinasyonu ile kayıtlı katılımcıları davet edebilir, bilgilendirebilir ve toplayabilirsiniz. Bugün size beş bölümden oluşan sanal bir zirve açılış sayfasının nasıl oluşturulacağını göstereceğiz. Tasarım, çift tonlu görüntüler ve kayan bölüm ayırıcılar içerir. Adım adım öğreticiyi atlamak istiyorsanız indirilebilir bir JSON dosyası da ekledik. Klasörde, hem PNG hem de AI'daki üstbilgi ve altbilgi grafiklerini de bulacaksınız.
Hadi hadi bakalım!
Ön izleme
Farklı ekran boyutlarında açılış sayfası tasarımına bir göz atalım.
masaüstü
Tablet
Mobil
ÜCRETSİZ Sanal Zirve Açılış Sayfasını İndirin
Ücretsiz sanal zirve açılış sayfası düzenine el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.
Ü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.
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!
Sanal Zirve Açılış Sayfası Bölümleri
Açılış sayfanızın işini yapabilmesi için belirli bir bölüm grubuna ihtiyacı vardır. İzleyicinin dikkatini çekmenin yanı sıra, açılış sayfaları da dönüştürülmelidir. Örneğin, bir sanal zirve açılış sayfasının ilgili bilgileri ve bir harekete geçirici mesajı içermesi gerekir. İzleyicinin harekete geçmek ve kaydolmak için ilham alması için tüm bölümler birinden diğerine sorunsuz bir şekilde akmalıdır.
Sanal Zirve Açılış Sayfasına aşağıdaki bölümleri ekledik:
başlık
Başlık bölümü, zirvenin başlığı ve etkinliğin tarihi gibi önemli bilgileri içerir. Bu en önemli bilgi, bu yüzden en üstte. Harekete geçirici mesaj ve sayfanın geri kalanına kolay gezinme olmadan hiçbir başlık tamamlanmaz.
Tasarımımıza, hoparlörlere ve program bölümlerine giden bağlantı bağlantılarına sahip iki düğme ekledik. En önemlisi, kayıt bölümüne bağlantı içeren bir düğme ekledik. Tasarımda görsel bütünlük sağlamak için sayfa boyunca tüm “kayıt” düğmeleri aynı görünüyor.
Bilgi
İkinci bölüm, izleyiciyi sanal zirveye katılmayı düşünmeye teşvik eden bilgilendirici bir bölümdür. Tasarıma dört tanıtım yazısı ve kolayca videoya dönüştürülebilen bir resim ekledik. Tanıtım yazıları zirveye katılmak için dört neden sıralıyor ve görüntü (veya video) kararı destekleyen görsel.
Konuşmacılar
Bir sonraki bölümde, altı kişilik bir modül seti bulacaksınız. Zirveye katılacak konuşmacıları burada tanıtıyorsunuz. Her modül aşağıdaki unsurları içerir:
- resim
- İsim
- Konum
- Açıklama
- Sosyal medya bağlantıları
Her bir konuşmacı için ilgili tüm bilgileri girdiğinizden emin olun. Ayrıca, tasarımın canlı görünmesini sağlamak için gövde metninde aynı miktarda satırı deneyin ve kullanın. Gördüğünüz gibi, tasarıma ilginç bir görünüm ve his vermek için tüm hoparlörlerin fotoğraflarında çift tonlu bir renk efekti kullandık. Photoshop'ta bu efektin nasıl elde edileceğine dair aşağıda adım adım bir eğitim var.
Altıdan fazla hoparlörünüz varsa, satırı çoğaltın veya modülleri daha fazla veya daha az sütunlu satırlara kopyalayın.
Program
Sıradaki zamanlama bölümü. Bu alanda, zirvenin programını zarif bir şekilde paylaştık ve yapısal olmasını sağladık. Metin tasarımının stilini korumak için içeriği değiştirdiğinizden, ancak başlık düzeylerini değiştirdiğinizden emin olun. Tasarımın düzgün kalması için içeriği yaklaşık aynı uzunlukta tutmaya çalışın.
Satırlar, bir başlık resmi ve bir grup tanıtım yazısı ile günlere göre düzenlenir. Son sütunun altında, izleyicilerin kaydolması için bir harekete geçirici mesaj düğmesi bulabilirsiniz.
Kayıt olmak
Son fakat en az değil, kayıt bölümüdür. Aciliyet duygusu eklemek için bir geri sayım sayacı ekledik. Her davetlinin otomatik olarak kaydedilebilmesi için iletişim formu doğrudan LCV listenize bağlı olmalıdır.
Sanal zirve açılış sayfası tasarımı boyunca, optimize edilmiş olası satış oluşturma için bu bölüme giden üç düğme bulacaksınız.
Photoshop ile Çift Tonlu Gradyan Haritası Oluşturun
Görüntüyü Adobe Photoshop'ta Aç
Tasarımımızdaki çift tonlu görüntüleri taklit etmek isterseniz aşağıdaki adımları izleyin. İlk olarak, Photoshop'ta bir resim açın.
Ayarlamaları Açın ve Gradyan Haritasını Seçin
Ayarlamalar araç çubuğunu açın ve gradyan haritasına tıklayın. Özellikler sekmesinde, ayarlar açılır penceresini açmak için degrade çubuğuna çift tıklayın.
Degrade Renklerini Ayarla
Degrade ayarlarında, ayarları özelleştirmek için her renge çift tıklayın.
Tasarımımızın etkisini elde etmek için gradyanı aşağıdaki gibi ayarlayın:
- Gradyan Türü: Katı
- Pürüzsüzlük: %100
- Opaklık Durdurma #1: %100
- Renk Durağı #2
- Koyu Mor #202060
- pozisyon: %19
- Orta nokta:
- Opaklık Orta Noktası: %85
- Renk Orta Noktası: %50
- Opaklık Durdurma #2: %55
- Renk Durağı #
- Menekşe #f895f8
- pozisyon: %100
Özel Gradyan Haritası Olarak Kaydet
Degradeniz için bir ad ekleyin ve kaydetmek için yeniye tıklayın. Daha sonra degrade kitaplığınızda saklanır. Web için görüntüyü 700 piksel yüksekliğinde kaydedin. İşlemi istediğiniz kadar görüntü ile tekrarlayın. Degrade haritasını uyguladıktan sonra, kaydettiğiniz degradeyi seçin.
1. Başlık Bölümü Oluşturun
Yeni Bölüm Ekle
Arka plan
Sanal zirve açılış sayfasını yeniden oluşturmaya başlayalım. Yeni bir sayfa oluşturun ve Divi Builder ile açın. Satır eklemeden önce, yeni bir bölüme bir arka plan resmi ve degrade ekleyin. Arka plan grafiğini yukarıdaki indirilebilir klasörde bulacaksınız.
- Arka Plan Gradyanı
- Renk 1: #1f4068
- Renk 2: #202040
- Arka Plan Resmi: Başlık Grafiği
boyutlandırma
Sonraki minimum yüksekliği ayarlayın.
- Minimum Yükseklik: 1050px
aralık
Aralığı da.
- Üst ve Alt Dolgu
- Masa ve Telefon: 90px
görünürlük
Son olarak, gelişmiş sekmesinde görünürlük ayarlarını yapın.
- Yatay ve Dikey Taşma: Gizli
Yeni Satır Ekle
Sütun Yapısı
Üç sütunlu bir satır ekleyin. 1/2, 1/4, 1/4 sütun yapısını seçin.
boyutlandırma
Satırın boyutunu aşağıdaki gibi ayarlayın:
- Genişlik: %90
- Maksimum Genişlik: 1800 piksel
- Hizalama: Merkez
aralık
\Biraz üst kenar boşluğu da ekleyin.
- Üst Kenar Boşluğu: 200 piksel
Sütun 2, 3 Ayarlar
aralık
Sütun 2 ve 3 için ayarları yapın. Önce boşluk
- Üst Kenar Boşluğu: 30px
görünürlük
Ardından, telefondaki sütunları gizleyin.
- Devre dışı bırak: Telefon
1. Sütun 1'e 1. Metin Modülü Ekle
Metin
Sütun 1'e ilk metin modülünü ekleyin. Başlığı H1 içeriği olarak ekleyin.
- Gövde: H1 İçeriği
Başlık Metni
Tasarım sekmesinde, sonraki başlık metnine stil verin.
- Başlık Seviyesi: H1
- Yazı Tipi: Alata
- Ağırlık: Kalın
- Hizalama: Merkez
- Renk: Kapalı Beyaz #eaeaea
- Boy
- Masaüstü: 85 piksel
- Tablet: 70 piksel
- Telefon: 44 piksel
- Harf Aralığı: 2px
- Çizgi Yüksekliği: 1.1em
- Metin Gölgesi: 1. Seçenek
- Gölge Rengi: rgba(o,0,0,0.26)
Sütun 1'e 2. Metin Modülü Ekle
Metin
İkinci bir metin modülü ekleyin. Tarihi H2 içeriği olarak girin.
- Gövde: H2 İçerik, 15+16 Temmuz 2020
Başlık Metni
Sonraki başlık metnine stil verin.
- Başlık Seviyesi: H2
- Yazı Tipi: Alata
- Ağırlık: Normal
- Hizalama: Merkez
- Renk: Fuşya #b030b0
- Boy
- Masaüstü ve Tablet: 60px
- Telefon: 45 piksel
- Çizgi Yüksekliği: 1.3em
aralık
Biraz boşluk da ekleyin.
- Alt Dolgu: 20px
Sütun 1'e Düğme Modülü Ekle
Metin
Harekete geçirici mesaj için bir düğme modülü ekleyin.
- Düğme: Kaydol
Bağlantı
Bağlantı bağlantısını ekleyin.
- Bağlantı URL'si: #Register
hizalama
Tasarım sekmesine gidin ve hizalamayı ayarlayın.
- Düğme Hizalama: Merkez
Düğme Özel Stilleri
Düğmeye de stil verin.
- Yazı Boyutu
- Masaüstü: 30 piksel
- Tablet: 25 piksel
- Telefon: 20 piksel
- Metin Rengi: Beyaz #ffffff
- Arkaplan: Mor #602080
- Sınır Yarıçapı: 35px
- Harf Aralığı: 1px
- Yazı Tipi: Alata
aralık
Son olarak, aralığı ayarlayın.
- Üst boşluk
- Tablet ve Telefon: 15px
- Üst Dolgu: 2px
2. Sütun'a Düğme Modülü Ekle
Metin
2. sütuna geçin ve bir düğme modülü ekleyin. Seçtiğiniz kopyayı ekleyin.
- Düğme: Hoparlörler
Bağlantı
Ardından, bir bağlantı bağlantısı ekleyin.
- Bağlantı URL'si: #Speakers
hizalama
Tasarım sekmesinde hizalamayı ayarlayın.
- Düğme Hizalama
- Masaüstü: Sağ
- Tablet ve Telefon: Merkez
Düğme Özel Stil
Özel düğme stillerini de ayarlayın.
- Metin Boyutu: 24px
- Metin Rengi: Beyaz #ffffff
- Arkaplan: Şeffaf
- Harf Aralığı: 1px
- Düğme Yazı Tipi: Alata
- Sınır Yarıçapı: 0px
Kutu Gölge
Son olarak, bir kutu gölgesi ekleyin.
- Kutu Gölgesi: 4. seçenek
- Yatay Konum: 0px
- Dikey Konum: 5 piksel
- Gölge Rengi: Fuşya: #b030b0
Düğme Modülünü Sütun 3'e Klonla
Klon Düğmesi
2. sütundaki düğmeyi klonlayın ve kopya modülü 3. sütuna yerleştirin.
Düğme Modülünü Ayarla
Metin
Klonlanmış düğmedeki metni değiştirin.
- Düğme: Program
Bağlantı
Bağlantı bağlantısını da değiştirin.
- Bağlantı URL'si: #Plan
hizalama
Hizalamayı da değiştirmeyi unutmayın.
- Düğme Hizalama
- Masaüstü Sol
Yeni Satır Ekle
Sütun Yapısı
İki eşit sütunlu yeni bir satır ekleyin.
boyutlandırma
Önce oluk genişliğini ayarlayın.
- Özel Oluk Genişliği: 2
aralık
Sonraki boşluk ekleyin.
- Üst boşluk
- Telefon: -35px
görünürlük
Ardından satırın görünürlüğünü ayarlayın.
- Devre Dışı Bırak: Tablet ve Masaüstü
Düğme Modülünü Klonla ve Çoğaltmayı Sütun 1'e Yerleştir
Klon Düğmesi
Düğme modülünü önceki satırın 2. sütununa kopyalayın ve kopya modülü yeni satırın 1. sütununa yerleştirin.
Düğme Modülünü Ayarla
Düğme Özel Stil
Yeni düğmedeki metni ayarlayın.
- Metin Boyutu: 20px
Kutu Gölge
Kutu gölgesini de değiştirin.
- Dikey Konum: 4px
Sütun 2'ye Klonlanmış Düğme Modülü Ekleme
Klon Düğmesi
Önceki satırdaki sütun 3'ten düğme modülünü çoğaltın. Bu satırın 2. sütununa yapıştırın.
Düğme Modülünü Ayarla
Metin
Klonlanmış düğmedeki metin içeriğini ayarlayın.
- Metin: Program
2. Bilgi Bölümü Oluştur
Yeni Bölüm Ekle
Arka plan
Bilgi bölümünü oluşturmak için yeni bir bölüm ekleyin ve önce arka planı biçimlendirin.
- Arka Plan Gradyanı
- Renk 1: #202040
- Renk 2: #202060
aralık
Biraz dolgu da ekleyin.
- Üst Dolgu: 170 piksel
- Alt Dolgu: 5px
görünürlük
Son olarak, gelişmiş sekmesinde görünürlük ayarlarını yapın.
- Yatay ve Dikey Taşma: Gizli
Yeni Satır Ekle
Sütun Yapısı
Tek sütunlu yeni bir satır ekleyin. Buna başlık satırı diyeceğiz.
boyutlandırma
Sonraki boyutu ayarlayın.
- Genişlik: %80
- Maksimum Genişlik: 1800 piksel
Metin Modülü Ekle
Metin
Bir metin modülü ekleyin.
- Gövde: H2 İçerik – Dijital Pazarlama Sanal Zirvesine neden katılmalı?
Başlık Metni
Tasarım sekmesinde başlık metnine stil verin.
- Başlık Seviyesi: H2
- Yazı Tipi: Alata
- Metin Rengi: Beyaz #ffffff
- Boy
- Masaüstü: 55 piksel
- tablet: 45 piksel
- Telefon: 40 piksel
- Harf Aralığı: 2px
- Satır Yüksekliği: 1.1 em
Bölücü Modülü Ekle
Hat
Şimdi bir ayırıcı modül ekleyin ve tasarım sekmesindeki çizgiye stil verin.
- Çizgi Rengi: Fuşya #b030b0
boyutlandırma
Sonraki boyutu ayarlayın.
- Bölücü Ağırlığı: 50px
- Maksimum Yükseklik: 50px
Kaydırma Efektleri
Gelişmiş sekmesinde yatay kaydırma efekti ekleyin.
- Yatay Hareketi Etkinleştir
- masaüstü
- Başlangıç Ofseti: -6
- Orta Ofset: %50 / 0
- Bitiş Ofseti: 6
- Tablet ve Telefon
- Belirtilen Ofset: -4
- Orta Ofset: %50 /0
- Bitiş Ofseti: 4
Yeni Satır Ekle
Sütun Yapısı
Şimdi üç sütunlu yeni bir satır ekleyin. 1/2, 1/4, 1/4 sütun yapısını seçin.
boyutlandırma
Modül eklemeden önce satır boyutunu ayarlayın.
- Genişlik: %80
- Maksimum Genişlik: 1800 piksel
Sütun 1 Ayarları
aralık
Ayrıca, ilk sütunun aralığını ayarlayın.
- Üst Dolgu: 20px
Sütun 1'e Görüntü Modülü Ekle
resim
Şimdi 1. sütuna bir görüntü modülü ekleyin. Çift ton efektli resimlerinizden birini kullanın.
- Resim: Çift ton efektli fotoğraf
Sınır
Kenarlıkları da ayarlayın.
- Yuvarlatılmış Köşeler: 15px
Sütun 2'ye Blurb Modülü Ekle
Metin
2. sütuna geçin ve bir tanıtıcı modül ekleyin. İçeriği yerleştirin.
- Başlık: Yeni Bağlantılar Kurun
- Gövde: Açıklayıcı İçerik
resim
İndirilebilir klasörde bulabileceğiniz 1 numaralı resmi yükleyin.
- Resim: 1'in PNG'si
Resim ve Simge
Sonraki görüntünün yerleşimini ayarlayın.
- Yerleşim: Üst
- Hizalama: Sol
Başlık Metni
Başlık metnine de stil verin.
- Başlık Seviyesi: H4
- Yazı Tipi: Alata
- Renk: Beyaz #ffffff
- Boyut: 23 piksel
Gövde metni
Gövde metnine stil vermeyi unutmayın.
- Yazı Tipi: Açık Sans
- Renk: Beyaz #ffffff
- Boyut: 14 piksel
- Harf Aralığı: 1px
Özel CSS
Son olarak, gelişmiş sekmesindeki tanıtım yazısı başlığına özel CSS ile biraz fazladan dolgu ekleyin.
- Blurb Title: padding-bottom: 15px;
padding-bottom: 15px;
Blurb Modülünü Klonla ve Çoğaltmayı Sütun 2'ye Yerleştir
Klon Bulanıklığı
2. sütunda 1. tanıtıcı metni çoğaltın.
İçerik
İçeriği güncelleyin.
- Başlık: Yeni Başlık
- Gövde: Yeni Açıklayıcı Metin
resim
Ardından, sayı görüntüsünü değiştirin. Yenisini indirilebilir klasörde bulabilirsiniz.
- Resim: #2 PNG
Sütun 3'ü Sil ve Sütun 2'yi Klonla
Klon Sütunu
Satır ayarlarında 3. sütunu silin ve 2. sütunu çoğaltın. Sütun yapısını 1/2, 1/4, 1/4'e döndürdüğünüzden emin olun.
Sütun 3'te Bulanıklık 1'i Ayarla
İçerik
Klonlanmış tanıtım yazısındaki metin içeriğini güncelleyin.
- Başlık: Yeni Başlık
- Gövde: Yeni Açıklayıcı Metin
resim
Numara görüntüsünü de değiştirin.
- Resim: #3 PNG
Sütun 3'te Bulanıklık 2'yi Ayarla
İçerik
Bu tanıtım yazısının içeriğini de değiştirin. Önce metin.
- Başlık: Yeni Başlık
- Gövde: Yeni Açıklayıcı Metin
resim
Ardından, sayı görüntüsünü değiştirin.
- Resim: #4 PNG
3. Konuşmacılar Bölümü Oluşturun
Yeni Bölüm Ekle
Arka plan
Konuşmacılar için bölüme geçiyoruz. Yeni bir bölüm ekleyin ve arka planı şekillendirin.
- Arka Plan Gradyanı
- Renk 1: #202060
- Renk 2: #162447
görünürlük
Gelişmiş sekmesinde görünürlük ayarlarını yapın.
- Yatay ve Dikey Taşma: Gizli
Başlık Satırını Klonla ve Kopyaları Yeni Bölüme Yerleştir
Satırı Çoğalt
Yukarıdaki bölümden başlık satırını çoğaltın ve kopyayı klonlanmış bölüme yerleştirin. Buna başlık satırı 2 diyeceğiz.
Metin Modülünü Ayarla
Metin
Ardından, tasarım sekmesindeki H3 metin ayarlarını stillendirin. Klonlanmış metin modülünde de CSS kimliğini ayarlayın. Ardından, ayırıcı modülün çizgi rengini değiştirin. Şimdi eşit büyüklükte 5 modül içeren yeni bir satır ekleyin. Satırın boyutunu aşağıdaki gibi ayarlayın: Biraz boşluk da ekleyin. Birinci şahıs modülünü sütun 1'e ekleyin. Renk efekti ile hoparlörün görüntüsünü yükleyin. 550 x 770 piksel resim boyutu öneririz. Bir sonraki resme bazı yuvarlak köşeler ekleyin. Ardından, başlık metnine stil verin. Gövde metnine de stil verin. Konum metnini unutmayın. Son olarak, ekstra dolgu için bazı özel CSS ekleyin. Satır ayarlarında, 2-5 sütunlarını silin. Sütun 1'i dört kez çoğaltın. Klonlanmış tüm modüllerdeki içeriği güncelleyin. Önce metin. Sonra görüntü. Şimdi zamanlama bölümünü oluşturacağız. Yeni bir bölüm ekleyin ve arka planı aşağıdaki gibi biçimlendirin: Gelişmiş sekmesinde görünürlük ayarlarını yapın. Başlık satırını yukarıdaki bölümden kopyalayın ve bu bölüme yapıştırın. Başlık içeriğini değiştirin. Klonlanmış metin modülündeki CSS kimliğini değiştirin. Ayırıcının rengini de değiştirin. Şimdi, eşit büyüklükte üç sütun içeren yeni bir satır ekleyin. Satırın boyutunu ayarlayın. Biraz boşluk da ekleyin. İlk sütuna bir metin modülü ekleyin. İçeriği yerleştirin. Tasarım sekmesine gidin ve başlık metnine stil verin. Sonra biraz boşluk ekleyin. Şimdi, seçtiğiniz içerikle bir harekete geçirici mesaj modülü ekleyin. Bir resim arka planı da ekleyin. Tasarım sekmesinde başlık metnine stil verin. Sonraki gövde metnine stil verin. Biraz boşluk da ekleyin. Ardından, kenarlığı stillendirin. Son olarak, ekstra stil için özel CSS ekleyin. 2. sütuna geçin ve bir metin modülü ekleyin. Bu içerik yapısını izleyin: Tasarım sekmesinde metne stil verin. Ardından tüm başlık düzeylerini stillendirin. Kenarlığı da stillendirin. 1. metin modülünü iki kez çoğaltın. Klonlanmış metin modüllerindeki içeriği değiştirin. Sütundaki son modülün kenarlığını kaldırın. Satır ayarlarında, 3. sütunu silin. 2. sütunu çoğaltın. Klonlanmış sütundaki 3. metin modülünü silin. Her yeni metin modülündeki içeriği güncelleyin. Başlık bölümündeki "kayıt ol" düğmesini kopyalayın ve 3. sütundaki son metin modülünün altına yapıştırın. Düğmenin hizalamasını sola değiştirin. Metin boyutunu biraz ayarlayın. Zamanlama bölümündeki 1. satırı çoğaltın. Klonlanmış metin modülündeki içeriği değiştirin. Eyleme çağrı modülünün içeriğini ayarlayın. Arka plan resmini de değiştirin. Metin modüllerindeki içeriği de ayarlayın. Son bölüm kayıt için ayrılmıştır. Yeni bir bölüm ekleyin ve arka planı aşağıdaki gibi şekillendirin. Altbilgi grafiğini yukarıdaki indirme klasöründe bulacaksınız. Bölüm aralığını da ayarlayın. Ve gelişmiş sekmesinde görünürlük ayarlarını değiştirin. Şimdi bir sütunlu yeni bir satır ekleyin. Bölüm için bağlantı bağlantısı görevi görecek görünmez bir ayırıcı ekleyin. Tüm "kayıt" düğmelerine bağlanan CSS kimliğini girin. İki eşit sütunlu ikinci bir satır ekleyin. Satırın boyutlandırma ayarlarını yapın. İlk sütuna bir geri sayım sayacı modülü ekleyin. Etkinliğin içeriğini ve tarihini ekleyin. Sonraki arka planı stillendirin. Tasarım sekmesinde başlık metnine stil verin. Sayı metnine de stil verin. Ayrıca, etiket metni. Ardından, satırın boyutunu ayarlayın. Biraz dolgu da ekleyin. Son olarak, kenarlığı stillendirin. 2. sütuna yeni bir iletişim formu modülü ekleyin. Mesaj alanını kaldırın. Her alan için ayarları girin. Tasarım sekmesinde, düzen altında “tam genişlik yap” seçeneğine tıklayın. İkinci alan için de aynısını yapın. Genel iletişim formu ayarlarına geri dönün ve biraz içerik ekleyin. Ardından alanları aşağıdaki gibi biçimlendirin: Başlık metnine de stil verin. Düğme özel stillerini de ayarlayın. Kenar yarıçapını ayarlamayı unutmayın. Son olarak, ekstra dolgu için özel CSS ekleyin. Yapılmıştı! Farklı ekran boyutlarında açılış sayfası tasarımına tekrar bir göz atalım. Başardın! Sanal zirve açılış sayfanız nasıl görünüyor? Bu tasarımı kendi sanal zirveniz veya bir web tasarım istemcisi için kullanın. Navigasyon, doğru miktarda bilgi ile dönüşüm için optimize edilmiştir. Biraz görsel ekstra için kaydırmalı bölüm bölücüler de ekledik. Yorumlarda ne düşündüğünüzü bize bildirin. Düzeni indirdiniz mi veya adımları izlediniz mi?
Başlık Metni
Özel CSS
Bölücüyü Ayarla
Hat
Yeni Satır Ekle
Sütun Yapısı
boyutlandırma
aralık
1. Sütun'a Kişi Modülü Ekle
Metin
resim
resim
Başlık Metni
Gövde metni
Konum Metni
Özel CSS
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
Sütun 1'i Çoğalt
Klon Sütunu
Yeni Kişi Modülleri İçin İçeriği Ayarlayın
Metin
resim
4. Program Bölümü Oluşturun
Yeni Bölüm Ekle
Arka plan
görünürlük
Klon Başlık Satırı 2
Satırı Çoğalt
Metin Modülünü Ayarla
Metin
Özel CSS
Bölücüyü Ayarla
Hat
Yeni Satır Ekle
Sütun Yapısı
boyutlandırma
aralık
Sütun 1'e Metin Modülü Ekle
Metin
Başlık Metni
aralık
1. Sütun'a Harekete Geçirici Mesaj ekleyin
Metin
Arka plan
Başlık Metni
Gövde metni
aralık
Sınır
Özel CSS
border-radius: 15px;
background-color: #162447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
Sütun 2'ye Metin Modülü Ekle
Metin
Metin
Başlık Metni
Sınır
Metin Modülünü 2 Kez Klonla
Klon Metin Modülü
Yeni Metin Modüllerini Ayarlayın
Metin
3. Metin Modülünün Kenarlığını Kaldır
Sınır
Sütun 3'ü Sil ve Sütun 2'yi Klonla
Klon Sütunları
Metin Modüllerini Kaldırın ve Ayarlayın
Metin Modülünü Sil
İçeriği Ayarla
Düğme Modülünü Klonla ve Çoğaltmayı Sütun 3'e Yerleştir
Klon Düğmesi
Düğme Modülünü Ayarla
hizalama
Düğme Özel Stil
Program Bölümünün 1. Satırını Klonla
Klon Satırı
Sütun 1'deki Metin Modülünü Ayarlayın
Metin
Harekete Geçirici Mesaj Modülünü Ayarlayın
Metin
Arka plan
Metin Modüllerini Ayarlayın
Metin
5. Kayıt Bölümü Oluşturun
Yeni Bölüm Ekle
Arka plan
aralık
görünürlük
Yeni Satır Ekle
Sütun Yapısı
Bölücü Modülü Ekle
görünürlük
CSS kimliği
Yeni Satır Ekle
Sütun Yapısı
boyutlandırma
Sütun 1'e Geri Sayım Sayacı Modülü Ekle
Metin
Arka plan
Başlık Metni
Sayılar Metin
Etiket Metni
boyutlandırma
aralık
Sınır
2. Sütun'a İletişim Formu Modülü Ekle
Elementler
Alan Düzeni
Metin
Alanlar
Başlık Metni
Düğme Özel Stilleri
Sınır
Özel CSS
padding-bottom: 30px;
Ön izleme
masaüstü
Tablet
Mobil
Bu bir Sargı