Divi ile Sanal Zirve Açılış Sayfası Nasıl Oluşturulur

Sanal 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.

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

<Modify the content.

• Başlık: Yeni başlık içeriği – Konuşmacılar

Başlık Metni

Ardından, tasarım sekmesindeki H3 metin ayarlarını stillendirin.

• Başlık Seviyesi: H3
• Yazı Tipi: Alata
• Boy
  • Masaüstü: 100 piksel
  • Tablet: 80 piksel
  • Telefon: 45 piksel

Özel CSS

Klonlanmış metin modülünde de CSS kimliğini ayarlayın.

• CSS Kimliği: Hoparlörler

Bölücüyü Ayarla

Hat

Ardından, ayırıcı modülün çizgi rengini değiştirin.

• Çizgi Rengi: Mor #602080

Yeni Satır Ekle

Sütun Yapısı

Şimdi eşit büyüklükte 5 modül içeren yeni bir satır ekleyin.

boyutlandırma

Satırın boyutunu aşağıdaki gibi ayarlayın:

• Genişlik: %80
• Maksimum Genişlik: 1800 piksel
• Sütun Yüksekliğini Eşitle: Evet

aralık

Biraz boşluk da ekleyin.

• Üst Kenar Boşluğu: 40px

1. Sütun'a Kişi Modülü Ekle

Metin

Birinci şahıs modülünü sütun 1'e ekleyin.

• İsim: Kişinin Adı
• Pozisyon: Kişinin Pozisyonu
• Sosyal Medya Profilleri: Kişi Profilleri
• Gövde: Açıklayıcı Metin

resim

Renk efekti ile hoparlörün görüntüsünü yükleyin. 550 x 770 piksel resim boyutu öneririz.

• Resim: Çift ton efektli fotoğraf

resim

Bir sonraki resme bazı yuvarlak köşeler ekleyin.

• Görüntü Yuvarlatılmış Köşeler: 15px

Başlık Metni

Ardından, başlık metnine stil verin.

• Başlık Seviyesi: H4
• Yazı Tipi: Alata
• Boyut: 33 piksel

Gövde metni

Gövde metnine de stil verin.

• Yazı Tipi: Açık Sans
• Boyut: 14 piksel
• Harf Aralığı: 1px

Konum Metni

Konum metnini unutmayın.

• Yazı Tipi: Alata
• Boyut: 20 piksel

Özel CSS

Son olarak, ekstra dolgu için bazı özel CSS ekleyin.

• Üye Resmi: padding-bottom: 10px;

padding-bottom: 10px;

• Başlık: alt dolgu: 20 piksel;

padding-bottom: 20px;

• Üye Konumu: alt dolgu: 20 piksel;

padding-bottom: 20px;

Sütun 1'i Çoğalt

Klon Sütunu

Satır ayarlarında, 2-5 sütunlarını silin. Sütun 1'i dört kez çoğaltın.

Yeni Kişi Modülleri İçin İçeriği Ayarlayın

Metin

Klonlanmış tüm modüllerdeki içeriği güncelleyin. Önce metin.

• İsim: Yeni Kişinin Adı
• Pozisyon: Yeni Kişinin Pozisyonu
• Sosyal Medya Profilleri: Yeni Kişi Profilleri
• Gövde: Yeni Açıklayıcı Metin

resim

Sonra görüntü.

• Resim: Çift ton efektli yeni resim (550×700 piksel)

4. Program Bölümü Oluşturun

Yeni Bölüm Ekle

Arka plan

Şimdi zamanlama bölümünü oluşturacağız. Yeni bir bölüm ekleyin ve arka planı aşağıdaki gibi biçimlendirin:

• Arka Plan Gradyanı
  • Renk 1: #162447
  • Renk 2: #1f4068

görünürlük

Gelişmiş sekmesinde görünürlük ayarlarını yapın.

• Yatay ve Dikey Taşma: Gizli

Klon Başlık Satırı 2

Satırı Çoğalt

Başlık satırını yukarıdaki bölümden kopyalayın ve bu bölüme yapıştırın.

Metin Modülünü Ayarla

Metin

Başlık içeriğini değiştirin.

• Başlık: Program

Özel CSS

Klonlanmış metin modülündeki CSS kimliğini değiştirin.

• CSS Kimliği: Zamanlama

Bölücüyü Ayarla

Hat

Ayırıcının rengini de değiştirin.

• Çizgi Rengi: Fuşya #b030b0

Yeni Satır Ekle

Sütun Yapısı

Şimdi, eşit büyüklükte üç sütun içeren yeni bir satır ekleyin.

boyutlandırma

Satırın boyutunu ayarlayın.

• Genişlik: %80
• Maksimum Genişlik: 1800 piksel

aralık

Biraz boşluk da ekleyin.

• Alt Kenar Boşluğu: 50px

Sütun 1'e Metin Modülü Ekle

Metin

İlk sütuna bir metin modülü ekleyin. İçeriği yerleştirin.

• Gövde: H3 İçerik – 1. Gün

Başlık Metni

Tasarım sekmesine gidin ve başlık metnine stil verin.

• Başlık Seviyesi: H3
• Renk: Beyaz #ffffff
• Boyut: 50 piksel

aralık

Sonra biraz boşluk ekleyin.

• Üst Dolgu: 20px
• Sol Dolgu: 30px

1. Sütun'a Harekete Geçirici Mesaj ekleyin

Metin

Şimdi, seçtiğiniz içerikle bir harekete geçirici mesaj modülü ekleyin.

• Başlık: Günün tema başlığı – Gelen Pazarlama
• Gövde: Açıklayıcı Metin

Arka plan

Bir resim arka planı da ekleyin.

• Arka plan resmi: Çift ton efektli resim

Başlık Metni

Tasarım sekmesinde başlık metnine stil verin.

• Başlık Seviyesi: H3
• Yazı Tipi: Alata
• Renk: Beyaz #ffffff
• Boyut: 26 piksel
• Harf Aralığı: 1px

Gövde metni

Sonraki gövde metnine stil verin.

• Yazı Tipi: Alata
• Renk: Beyaz #ffffff
• Boyut: 15 piksel

aralık

Biraz boşluk da ekleyin.

• Üst Kenar Boşluğu: -120px

Sınır

Ardından, kenarlığı stillendirin.

• Yuvarlatılmış Köşeler: 15px

Özel CSS

Son olarak, ekstra stil için özel CSS ekleyin.

• Promosyon Açıklaması
  • sınır yarıçapı: 15 piksel;
  • arka plan rengi: #162447;
  • sol dolgu: 25 piksel;
  • dolgu-sağ: 25px;
  • alt dolgu: 40 piksel;

border-radius: 15px;
background-color: #162447; 
margin-top: 500px; 
padding-bottom: 40px; 
padding-bottom: 40px;

• Promosyon Başlığı
  • arka plan rengi: #q62447
  • üst kenar boşluğu: 500px
  • alt dolgu: 40px
  • alt dolgu: 40px

background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;

Sütun 2'ye Metin Modülü Ekle

Metin

2. sütuna geçin ve bir metin modülü ekleyin. Bu içerik yapısını izleyin:

• Vücut
  • Tarih: H4 İçeriği
  • Konuşmacı: H5 İçeriği
  • Konu: H6 İçeriği
  • Açıklama: Paragraf İçeriği

Metin

Tasarım sekmesinde metne stil verin.

• Yazı Tipi: Açık Sans
• Boyut: 14 piksel
• Harf Aralığı: 1px
• Hizalama: Sol

Başlık Metni

Ardından tüm başlık düzeylerini stillendirin.

• Başlık Seviyesi: H4
  • Yazı Tipi: Alata
  • Ağırlık: Kalın
  • Boyut: 40 piksel
• Başlık Seviyesi: H5
  • Yazı Tipi: Alata
  • Boyut: 25 piksel
  • Satır Yüksekliği: 1.5em
• Başlık Seviyesi: H6
  • Yazı Tipi: Alata
  • Tarz: İtalik
  • Boyut: 19 piksel
  • Satır Yüksekliği: 1.5em

Sınır

Kenarlığı da stillendirin.

• Tarz: Alt Kenarlık
• Genişlik: 3 piksel
• Renk: Fuşya #b030b0

Metin Modülünü 2 Kez Klonla

Klon Metin Modülü

1. metin modülünü iki kez çoğaltın.

Yeni Metin Modüllerini Ayarlayın

Metin

Klonlanmış metin modüllerindeki içeriği değiştirin.

• Vücut
  • Tarih: Yeni H4 İçeriği
  • Konuşmacı: Yeni H5 İçeriği
  • Konu: Yeni H6 İçeriği
  • Açıklama: Yeni Paragraf İçeriği

3. Metin Modülünün Kenarlığını Kaldır

Sınır

Sütundaki son modülün kenarlığını kaldırın.

• Alt Kenar Genişliği
  • Masaüstü: 0 piksel
  • Tablet ve Telefon: 3px

Sütun 3'ü Sil ve Sütun 2'yi Klonla

Klon Sütunları

Satır ayarlarında, 3. sütunu silin. 2. sütunu çoğaltın.

Metin Modüllerini Kaldırın ve Ayarlayın

Metin Modülünü Sil

Klonlanmış sütundaki 3. metin modülünü silin.

İçeriği Ayarla

Her yeni metin modülündeki içeriği güncelleyin.

• Vücut
  • Tarih: Yeni H4 İçeriği
  • Konuşmacı: Yeni H5 İçeriği
  • Konu: Yeni H6 İçeriği
  • Açıklama: Yeni Paragraf İçeriği

Düğme Modülünü Klonla ve Çoğaltmayı Sütun 3'e Yerleştir

Klon Düğmesi

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üğme Modülünü Ayarla

hizalama

Düğmenin hizalamasını sola değiştirin.

• Düğme Hizalama: Sol

Düğme Özel Stil

Metin boyutunu biraz ayarlayın.

• Yazı Boyutu
  • Masaüstü ve Tablet: 25 piksel
  • Telefon: 20 piksel

Program Bölümünün 1. Satırını Klonla

Klon Satırı

Zamanlama bölümündeki 1. satırı çoğaltın.

Sütun 1'deki Metin Modülünü Ayarlayın

Metin

Klonlanmış metin modülündeki içeriği değiştirin.

• Vücut: 2. Gün

Harekete Geçirici Mesaj Modülünü Ayarlayın

Metin

Eyleme çağrı modülünün içeriğini ayarlayın.

• Başlık: Yeni günün tema başlığı
• Açıklama: Yeni açıklayıcı içerik

Arka plan

Arka plan resmini de değiştirin.

• Arka Plan Resmi: Çift ton efektli yeni resim

Metin Modüllerini Ayarlayın

Metin

Metin modüllerindeki içeriği de ayarlayın.

• Vücut
  • Tarih: Yeni H4 İçeriği
  • Konuşmacı: Yeni H5 İçeriği
  • Konu: Yeni H6 İçeriği
  • Açıklama: Yeni Paragraf İçeriği

5. Kayıt Bölümü Oluşturun

Yeni Bölüm Ekle

Arka plan

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.

• Arka Plan Rengi: Mor #602080
• Arka Plan Resmi: Altbilgi Grafiği
• Görüntü Konumu: Üst Merkez

aralık

Bölüm aralığını da ayarlayın.

• Üst Dolgu: 70px
• Alt Dolgu: 120px

görünürlük

Ve gelişmiş sekmesinde görünürlük ayarlarını değiştirin.

• Yatay ve Dikey Taşma: Gizli

Yeni Satır Ekle

Sütun Yapısı

Şimdi bir sütunlu yeni bir satır ekleyin.

Bölücü Modülü Ekle

görünürlük

Bölüm için bağlantı bağlantısı görevi görecek görünmez bir ayırıcı ekleyin.

• Bölücüyü Göster: Hayır

CSS kimliği

Tüm "kayıt" düğmelerine bağlanan CSS kimliğini girin.

• CSS Kimliği: Kaydolun

Yeni Satır Ekle

Sütun Yapısı

İki eşit sütunlu ikinci bir satır ekleyin.

boyutlandırma

Satırın boyutlandırma ayarlarını yapın.

• Özel Oluk Genişliği: 4
• Genişlik: %80
• Maksimum Genişlik:: 1800 piksel

Sütun 1'e Geri Sayım Sayacı Modülü Ekle

Metin

İlk sütuna bir geri sayım sayacı modülü ekleyin. Etkinliğin içeriğini ve tarihini ekleyin.

• Başlık: Tanımlayıcı Başlık
• Tarih: Başlangıç ​​Tarihi

Arka plan

Sonraki arka planı stillendirin.

• Arka Plan Gradyanı
  • Renk 1: #1f4068
  • Renk 2: #162447

Başlık Metni

Tasarım sekmesinde başlık metnine stil verin.

• Başlık Seviyesi: H4
• Yazı Tipi: Alata
• Hizalama: Merkez
• Renk: Beyaz #ffffff
• Boy
  • Masaüstü ve Tablet: 30 piksel
  • Telefon: 25x

Sayılar Metin

Sayı metnine de stil verin.

• Yazı Tipi: Alata
• Renk: Beyaz #ffffff
• Boy
  • Masaüstü: 55 piksel
  • Tablet: 35 piksel
  • Telefon: 25 piksel

Etiket Metni

Ayrıca, etiket metni.

• Yazı Tipi: Alata
• Boyut: 9 piksel

boyutlandırma

Ardından, satırın boyutunu ayarlayın.

• Genişlik
  • Boyutlandırma: 100%

aralık

Biraz dolgu da ekleyin.

• Üst ve Alt Dolgu: 60px

Sınır

Son olarak, kenarlığı stillendirin.

• Yuvarlatılmış Köşeler: 15px

2. Sütun'a İletişim Formu Modülü Ekle

Elementler

2. sütuna yeni bir iletişim formu modülü ekleyin. Mesaj alanını kaldırın.

• Mesaj Alanı: Kaldır

Alan Düzeni

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.

• Düzen: Tam genişlikte yap

Metin

Genel iletişim formu ayarlarına geri dönün ve biraz içerik ekleyin.

• Başlık: Açıklayıcı başlık
• Başarı Mesajı: Mesajınız
• Gönder Düğmesi: Kaydolun

Alanlar

Ardından alanları aşağıdaki gibi biçimlendirin:

• Arka Plan Rengi: Şeffaf
• Metin Rengi: Beyaz #ffffff
• Odak Arka Plan Rengi: Şeffaf
• Odak Metni Rengi: Beyaz #ffffff
• Yazı Tipi: Alata
• Boy
  • Masaüstü: 22 piksel
  • Tablet ve Telefon: 18px
• Harf Aralığı: 1px

Başlık Metni

Başlık metnine de stil verin.

• Başlık Seviyesi: H4
• Yazı Tipi: Alata
• Renk: Beyaz #ffffff
• Boy
  • Masaüstü ve Telefon: 30px
  • Telefon: 24 piksel
• Harf Aralığı: 1px

Düğme Özel Stilleri

Düğme özel stillerini de ayarlayın.

• Metin Boyutu: 20px
• Metin Rengi: Beyaz #ffffff
• Arka Plan Rengi: Mavi #1f4068
• Sınır Yarıçapı: 15 piksel
• Harf Aralığı: 1px
• Yazı Tipi: Alata
• Üst Kenar Boşluğu: 10px
• Üst Dolgu
  • Tablet ve Telefon: 60px

Sınır

Kenar yarıçapını ayarlamayı unutmayın.

• Yuvarlatılmış Köşeler: 15px
• Kenar Genişliği: 2px
• Renk: Beyaz #fffff

Özel CSS

Son olarak, ekstra dolgu için özel CSS ekleyin.

• İrtibat Başlığı: padding-bottom: 30px;

padding-bottom: 30px;

Ön izleme

Yapılmıştı! Farklı ekran boyutlarında açılış sayfası tasarımına tekrar bir göz atalım.

masaüstü

Tablet

Mobil

Bu bir Sargı

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?