Diviで仮想サミットランディングページを作成する方法
公開: 2020-07-02仮想イベントの宣伝には、いくつかの宣伝戦略が含まれます。 魅力的なランディングページを作成することもその1つです。 仮想サミットのランディングページを作成することは、視聴者を興味深くさせるのに最適な方法です。 セクションの適切な組み合わせにより、登録済みの参加者を招待、通知、および収集できます。 今日は、5つのセクションからなる仮想サミットランディングページを作成する方法を紹介します。 デザインには、デュオトーン画像とスクロールセクションディバイダーが含まれています。 ステップバイステップのチュートリアルをスキップしたい場合は、ダウンロード可能なJSONファイルも含まれています。 このフォルダーには、PNGとAIの両方のヘッダーとフッターのグラフィックもあります。
それを手に入れよう！
プレビュー
さまざまな画面サイズでのランディングページのデザインを見てみましょう。
デスクトップ
タブレット
モバイル
バーチャルサミットランディングページを無料でダウンロード
無料の仮想サミットのランディングページのレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
バーチャルサミットランディングページセクション
ランディングページがその役割を果たすためには、特定のセクションのセットが必要です。 視聴者の目を引くだけでなく、ランディングページも変換する必要があります。 たとえば、仮想サミットのランディングページには、関連情報と行動の呼びかけを含める必要があります。 視聴者が行動してサインアップするインスピレーションを感じるには、すべてのセクションがシームレスに流れる必要があります。
バーチャルサミットランディングページには、次のセクションが含まれています。
ヘッダ
ヘッダーセクションには、サミットのタイトルやイベントの日付などの重要な情報が含まれています。 これは最も重要な情報であり、それが一番上にある理由です。 アクションの呼び出しとページの残りの部分への簡単なナビゲーションがなければ、ヘッダーは完成しません。
私たちのデザインには、スピーカーとスケジュールセクションに移動するアンカーリンク付きの2つのボタンが含まれています。 最も重要なのは、登録セクションへのリンクが付いたボタンが含まれていることです。 デザインを視覚的に統一するために、ページ全体ですべての「登録」ボタンは同じように見えます。
情報
2番目のセクションは、仮想サミットへの参加を検討するよう視聴者を促す情報セクションです。 デザインには、4つの宣伝文と簡単にビデオに変更できる画像を追加しました。 宣伝文には、サミットに参加する4つの理由が記載されており、画像（またはビデオ）は決定を裏付ける視覚的なものです。
スピーカー
次のセクションでは、6人用モジュールのセットを見つけます。 ここで、サミットに参加するスピーカーを紹介します。 各モジュールには、次の要素が含まれています。
- 画像
- 名前
- ポジション
- 説明
- ソーシャルメディアリンク
各スピーカーに関連するすべての情報を必ず入力してください。 また、デザインをくっきりと見せるために、本文に同じ量の行を使用してみてください。 ご覧のとおり、すべてのスピーカーの写真にデュオトーンカラー効果を使用して、デザインに興味深いルックアンドフィールを与えました。 Photoshopでこの効果を実現する方法については、以下のステップバイステップのチュートリアルがあります。
スピーカーが6つを超える場合は、行を複製するか、モジュールを列の数が多い行または少ない行に複製します。
スケジュール
次はスケジュールセクションです。 この分野では、サミットのスケジュールをエレガントに共有し、構造的であることを確認しました。 テキストデザインのスタイルを維持するには、見出しレベルではなくコンテンツを変更してください。 デザインがきれいに保たれるように、コンテンツをほぼ同じ長さに保つようにしてください。
行は、タイトル画像と宣伝文のグループで日ごとに編成されています。 最後の列の下部に、オーディエンスが登録するための召喚状ボタンがあります。
登録
最後になりましたが、登録セクションです。 切迫感をプラスするカウントダウンタイマーを搭載。 各招待者が自動的に登録されるように、お問い合わせフォームをRSVPリストに直接リンクする必要があります。
バーチャルサミットのランディングページのデザイン全体を通して、最適化されたリード生成のためにこのセクションに移動する3つのボタンがあります。
PhotoshopでDuotoneグラデーションマップを作成する
AdobePhotoshopで画像を開く
デザインでデュオトーン画像を模倣したい場合は、以下の手順に従ってください。 まず、Photoshopで画像を開きます。
調整を開き、グラデーションマップを選択します
調整ツールバーを開き、グラデーションマップをクリックします。 [プロパティ]タブで、グラデーションバーをダブルクリックして設定ポップアップを開きます。
グラデーションの色を調整する
グラデーション設定で、各色をダブルクリックして設定をカスタマイズします。
デザインの効果を得るには、次のようにグラデーションを調整します。
- グラデーションタイプ：ソリッド
- 滑らかさ：100％
- 不透明度停止＃1：100％
- カラーストップ＃2
- ダークパープル＃202060
- ポジション：19％
- 中点：
- 不透明度の中点：85％
- 色の中点：50％
- 不透明度ストップ＃2：55％
- カラーストップ＃
- バイオレット＃f895f8
- 位置：100％
カスタムグラデーションマップとして保存
グラデーションの名前を追加し、[新規]をクリックして保存します。 その後、グラデーションライブラリに保存されます。 ウェブ用の画像を700pxの高さで保存します。 必要な数の画像でこのプロセスを繰り返します。 グラデーションマップを適用した後、保存したグラデーションを選択します。
1.ヘッダーセクションを作成します
新しいセクションを追加
バックグラウンド
バーチャルサミットのランディングページの再作成を始めましょう。 新しいページを作成し、DiviBuilderで開きます。 行を追加する前に、背景画像とグラデーションを新しいセクションに追加します。 上のダウンロード可能なフォルダに背景のグラフィックがあります。
- 背景グラデーション
- 色1：＃1f4068
- カラー2：＃202040
- 背景画像：ヘッダーグラフィック
サイジング
次に最小の高さを調整します。
- 最小の高さ：1050px
間隔
間隔も。
- 上部と下部のパディング
- テーブルと電話：90px
可視性
最後に、[詳細設定]タブで表示設定を調整します。
- 水平および垂直オーバーフロー：非表示
新しい行を追加
カラム構造
3列の行を追加します。 1 / 2、1 / 4、1 / 4列構造を選択します。
サイジング
次のように行のサイズを調整します。
- 幅：90％
- 最大幅：1800px
- 配置：中央
間隔
\上マージンも追加します。
- トップマージン：200px
列2、3の設定
間隔
2列目と3列目の設定を調整します。最初に間隔
- トップマージン：30px
可視性
次に、電話の列を非表示にします。
- 無効にする：電話
1番目のテキストモジュールを列1に追加
文章
列1に最初のテキストモジュールを追加します。タイトルをH1コンテンツとして挿入します。
- 本文：H1コンテンツ
見出しテキスト
[デザイン]タブで、次に見出しテキストのスタイルを設定します。
- 見出しレベル：H1
- フォント：Alata
- 重量：太字
- 配置：中央
- カラー：オフホワイト#eaeaea
- サイズ
- デスクトップ：85px
- タブレット：70px
- 電話番号：44px
- 文字間隔：2px
- 線の高さ：1.1em
- テキストシャドウ：最初のオプション
- 影の色：rgba（o、0,0,0.26）
2番目のテキストモジュールを列1に追加します
文章
2番目のテキストモジュールを追加します。 H2コンテンツとして日付を挿入します。
- 本文：H2コンテンツ、2020年7月15日+ 16日
見出しテキスト
次に見出しテキストのスタイルを設定します。
- 見出しレベル：H2
- フォント：Alata
- 重量：レギュラー
- 配置：中央
- 色：フクシア＃b030b0
- サイズ
- デスクトップとタブレット：60px
- 電話番号：45ピクセル
- 線の高さ：1.3em
間隔
間隔も追加します。
- ボトムパディング：20px
ボタンモジュールを列1に追加
文章
召喚状のボタンモジュールを追加します。
- ボタン：登録
リンク
アンカーリンクを追加します。
- リンクURL：#Register
配置
[デザイン]タブに移動して、配置を設定します。
- ボタンの配置：中央
ボタンのカスタムスタイル
ボタンのスタイルも設定します。
- 文字サイズ
- デスクトップ：30px
- タブレット：25ピクセル
- 電話番号：20px
- テキストの色：白#ffffff
- 背景：紫＃602080
- 境界半径：35px
- 文字間隔：1px
- フォント：Alata
間隔
最後に、間隔を調整します。
- トップマージン
- タブレットと電話：15px
- トップパディング：2px
ボタンモジュールを列2に追加
文章
列2に移動し、ボタンモジュールを追加します。 選択したコピーを追加します。
- ボタン：スピーカー
リンク
次に、アンカーリンクを追加します。
- リンクURL：#Speakers
配置
[デザイン]タブで、配置を設定します。
- ボタンの配置
- デスクトップ：右
- タブレットと電話：センター
ボタンカスタムスタイル
カスタムボタンのスタイルも調整します。
- テキストサイズ：24px
- テキストの色：白#ffffff
- 背景：透明
- 文字間隔：1px
- ボタンフォント：Alata
- 境界半径：0px
ボックスシャドウ
最後に、ボックスシャドウを追加します。
- ボックスシャドウ：4番目のオプション
- 水平位置：0px
- 垂直位置：5ピクセル
- 影の色：フクシア：＃b030b0
ボタンモジュールを列3に複製する
クローンボタン
列2のボタンのクローンを作成し、複製モジュールを列3に配置します。
ボタンモジュールの調整
文章
複製されたボタンのテキストを変更します。
- ボタン：スケジュール
リンク
アンカーリンクも変更します。
- リンクURL：#Schedule
配置
配置も変更することを忘れないでください。
- ボタンの配置
- デスクトップ左
新しい行を追加
カラム構造
2つの等しい列を持つ新しい行を追加します。
サイジング
最初に側溝の幅を調整します。
- カスタムガター幅：2
間隔
次に間隔を追加します。
- トップマージン
- 電話番号：-35px
可視性
次に、行の可視性を調整します。
- 無効にする：タブレットとデスクトップ
ボタンモジュールのクローンを作成し、列1に複製を配置します
クローンボタン
前の行の列2にあるボタンモジュールのクローンを作成し、複製したモジュールを新しい行の列1に配置します。
ボタンモジュールの調整
ボタンカスタムスタイル
新しいボタンのテキストを調整します。
- テキストサイズ：20px
ボックスシャドウ
ボックスシャドウも変更します。
- 垂直位置：4px
クローンボタンモジュールを列2に追加します
クローンボタン
前の行の列3からボタンモジュールを複製します。 この行の2列目に貼り付けます。
ボタンモジュールの調整
文章
複製されたボタンのテキストコンテンツを調整します。
- テキスト：スケジュール
2.情報セクションを作成します
新しいセクションを追加
バックグラウンド
情報セクションを作成するには、新しいセクションを追加し、最初に背景のスタイルを設定します。
- 背景グラデーション
- カラー1：＃202040
- カラー2：＃202060
間隔
パディングも追加します。
- トップパディング：170px
- ボトムパディング：5px
可視性
最後に、[詳細設定]タブで表示設定を調整します。
- 水平および垂直オーバーフロー：非表示
新しい行を追加
カラム構造
1列の新しい行を追加します。 これをタイトル行と呼びます。
サイジング
次にサイズを設定します。
- 幅：80％
- 最大幅：1800px
テキストモジュールを追加
文章
テキストモジュールを追加します。
- 本文：H2コンテンツ–なぜデジタルマーケティングバーチャルサミットに参加するのですか？
見出しテキスト
[デザイン]タブで、見出しテキストのスタイルを設定します。
- 見出しレベル：H2
- フォント：Alata
- テキストの色：白#ffffff
- サイズ
- デスクトップ：55px
- タブレット：45px
- 電話番号：40px
- 文字間隔：2px
- 線の高さ：1.1 em
仕切りモジュールを追加
ライン
次に、仕切りモジュールを追加し、デザインタブで線のスタイルを設定します。
- 線の色：フクシア＃b030b0
サイジング
次にサイズを調整します。
- 仕切りの重量：50px
- 最大高さ：50px
スクロール効果
[詳細設定]タブで、水平スクロール効果を追加します。
- 水平モーションを有効にする
- デスクトップ
- 開始オフセット：-6
- ミッドオフセット：50％/ 0
- 終了オフセット：6
- タブレットと電話
- 記載オフセット：-4
- ミッドオフセット：50％/ 0
- 終了オフセット：4
新しい行を追加
カラム構造
次に、3列の新しい行を追加します。 1 / 2、1 / 4、1 / 4列構造を選択します。
サイジング
モジュールを追加する前に、行のサイズを調整してください。
- 幅：80％
- 最大幅：1800px
列1の設定
間隔
また、最初の列の間隔を調整します。
- トップパディング：20px
列1に画像モジュールを追加
画像
次に、画像モジュールを列1に追加します。デュオトーン効果のある画像の1つを使用します。
- 画像：デュオトーン効果のある写真
国境
境界線も調整します。
- 丸みを帯びた角：15px
列2に宣伝文モジュールを追加する
文章
列2に移動し、宣伝文モジュールを追加します。 コンテンツを挿入します。
- タイトル：新しい接続を作成する
- 本文：説明的な内容
画像
ダウンロード可能なフォルダにあるナンバーワンの画像をアップロードします。
- 画像：＃1のPNG
画像とアイコン
次に画像の配置を調整します。
- 配置：上
- 配置：左
タイトルテキスト
タイトルテキストもスタイル設定します。
- 見出しレベル：H4
- フォント：Alata
- 色：白#ffffff
- サイズ：23px
本文
本文のスタイルを設定することを忘れないでください。
- フォント：Open Sans
- 色：白#ffffff
- サイズ：14px
- 文字間隔：1px
カスタムCSS
最後に、[詳細設定]タブの宣伝文のタイトルにカスタムCSSを使用したパディングを追加します。
- 宣伝文のタイトル：padding-bottom：15px;
padding-bottom: 15px;
宣伝文句モジュールのクローンを作成し、列2に複製を配置します
クローン宣伝文
列2の最初の宣伝文を複製します。
コンテンツ
コンテンツを更新します。
- タイトル：新しいタイトル
- 本文：新しい説明テキスト
画像
次に、数字の画像を変更します。 新しいものはダウンロード可能なフォルダにあります。
- 画像：＃2のPNG
列3を削除し、列2のクローンを作成します
クローンカラム
行設定で、3番目の列を削除し、2番目の列を複製します。 必ず列構造を1 / 2、1 / 4、1 / 4に戻してください。
列3のぼかし1を調整します
コンテンツ
複製された宣伝文のテキストコンテンツを更新します。
- タイトル：新しいタイトル
- 本文：新しい説明テキスト
画像
数字の画像も変更してください。
- 画像：＃3のPNG
列3の宣伝文2を調整します
コンテンツ
この宣伝文の内容も変更します。 最初にテキスト。
- タイトル：新しいタイトル
- 本文：新しい説明テキスト
画像
次に、数字の画像を変更します。
- 画像：＃4のPNG
3.スピーカーセクションを作成します
新しいセクションを追加
バックグラウンド
スピーカーのセクションに移ります。 新しいセクションを追加し、背景のスタイルを設定します。
- 背景グラデーション
- カラー1：＃202060
- カラー2：＃162447
可視性
[詳細設定]タブで表示設定を調整します。
- 水平および垂直オーバーフロー：非表示
タイトル行のクローンを作成し、新しいセクションに重複して配置する
行が重複しています
上記のセクションからタイトル行を複製し、複製したセクションを複製したセクションに配置します。 これをタイトル行2と呼びます。
テキストモジュールを調整する
文章
次に、デザインタブでH3テキスト設定のスタイルを設定します。 複製されたテキストモジュールのCSSIDも調整します。 次に、仕切りモジュールの線の色を変更します。 次に、5つの同じサイズのモジュールで新しい行を追加します。 次のように行のサイズを調整します。 間隔も追加します。 一人称モジュールを列1に追加します。 カラー効果のあるスピーカーの画像をアップロードします。 550 x770ピクセルの画像サイズをお勧めします。 次に、画像に丸みを帯びた角をいくつか追加します。 次に、タイトルテキストのスタイルを設定します。 本文のテキストもスタイル設定します。 位置のテキストを忘れないでください。 最後に、追加のパディング用にカスタムCSSを追加します。 行設定で、列2〜5を削除します。 列1を4回複製します。 複製されたすべてのモジュールのコンテンツを更新します。 最初にテキスト。 次に画像。 次に、スケジュールセクションを作成します。 新しいセクションを追加し、次のように背景のスタイルを設定します。 [詳細設定]タブで表示設定を調整します。 上記のセクションからタイトル行のクローンを作成し、このセクションに貼り付けます。 タイトルの内容を変更します。 複製されたテキストモジュールのCSSIDを変更します。 仕切りの色も変更します。 次に、同じサイズの3つの列を持つ新しい行を追加します。 行のサイズを調整します。 間隔も追加します。 最初の列にテキストモジュールを追加します。 コンテンツを挿入します。 [デザイン]タブに移動して、見出しテキストのスタイルを設定します。 次に間隔を追加します。 次に、選択したコンテンツを含むアクション呼び出しモジュールを追加します。 画像の背景も追加します。 [デザイン]タブで、見出しテキストのスタイルを設定します。 次に本文のスタイルを設定します。 間隔も追加します。 次に、境界線のスタイルを設定します。 最後に、追加のスタイル設定のためにカスタムCSSを追加します。 列2に移動し、テキストモジュールを追加します。 このコンテンツ構造に従ってください： [デザイン]タブで、テキストのスタイルを設定します。 次に、すべての見出しレベルのスタイルを設定します。 ボーダーもスタイリングします。 最初のテキストモジュールを2回複製します。 複製されたテキストモジュールの内容を変更します。 列の最後のモジュールの境界線を削除します。 行設定で、列3を削除します。列2を複製します。 複製された列の3番目のテキストモジュールを消去します。 新しいテキストモジュールごとにコンテンツを更新します。 ヘッダーセクションの「登録」ボタンをコピーして、列3の最後のテキストモジュールの下に貼り付けます。 ボタンの配置を左に変更します。 テキストサイズを少し調整します。 スケジュールセクションの最初の行を複製します。 複製されたテキストモジュールの内容を変更します。 召喚状モジュールの内容を調整します。 背景画像も変更します。 テキストモジュールの内容も調整します。 最後のセクションは登録専用です。 新しいセクションを追加し、次のように背景のスタイルを設定します。 上のダウンロードフォルダにフッターグラフィックがあります。 セクションの間隔も調整します。 また、[詳細設定]タブで表示設定を変更します。 次に、1つの列を持つ新しい行を追加します。 セクションのアンカーリンクとして機能する非表示の仕切りを追加します。 すべての「登録」ボタンにリンクするCSSIDを挿入します。 2つの等しい列を持つ2番目の行を追加します。 行のサイズ設定を調整します。 カウントダウンタイマーモジュールを最初の列に追加します。 イベントの内容と日付を追加します。 次に背景のスタイルを設定します。 [デザイン]タブで、タイトルテキストのスタイルを設定します。 数字のテキストもスタイル設定します。 また、ラベルテキスト。 次に、行のサイズを調整します。 パディングも追加します。 最後に、境界線のスタイルを設定します。 列2に新しい連絡先フォームモジュールを追加します。メッセージフィールドを削除します。 各フィールドの設定を入力します。 [デザイン]タブの[レイアウト]で、[全幅にする]をクリックします。 2番目のフィールドについても同じようにします。 一般的なお問い合わせフォームの設定に戻り、コンテンツを追加します。 次に、フィールドのスタイルを次のように設定します。 タイトルテキストもスタイル設定します。 ボタンのカスタムスタイルも調整します。 境界線の半径を調整することを忘れないでください。 最後に、追加のパディング用にカスタムCSSを追加します。 終わったね！ さまざまな画面サイズでランディングページのデザインをもう一度見てみましょう。 やった！ 仮想サミットのランディングページはどのように見えますか？ このデザインは、独自の仮想サミットまたはWebデザインクライアントに使用してください。 ナビゲーションは、適切な量の情報を使用して変換できるように最適化されています。 少し視覚的にも追加するために、スクロールセクションの仕切りを追加しました。 コメントであなたの考えを教えてください。 レイアウトをダウンロードしましたか、それとも手順に従いましたか？
見出しテキスト
カスタムCSS
仕切りを調整する
ライン
新しい行を追加
カラム構造
サイジング
間隔
個人モジュールを列1に追加
文章
画像
画像
タイトルテキスト
本文
位置テキスト
カスタムCSS
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
重複する列1
クローンカラム
新規個人モジュールのコンテンツを調整する
文章
画像
4.スケジュールセクションを作成します
新しいセクションを追加
バックグラウンド
可視性
クローンタイトル行2
行が重複しています
テキストモジュールを調整する
文章
カスタムCSS
仕切りを調整する
ライン
新しい行を追加
カラム構造
サイジング
間隔
列1にテキストモジュールを追加
文章
見出しテキスト
間隔
列1に召喚状を追加する
文章
バックグラウンド
見出しテキスト
本文
間隔
国境
カスタム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;
列2にテキストモジュールを追加します
文章
文章
見出しテキスト
国境
テキストモジュールを2回複製する
クローンテキストモジュール
新しいテキストモジュールを調整する
文章
3番目のテキストモジュールの境界線を削除します
国境
列3を削除し、列2のクローンを作成します
クローン列
テキストモジュールの削除と調整
テキストモジュールを削除する
コンテンツを調整する
ボタンモジュールのクローンを作成し、列3に複製を配置します
クローンボタン
ボタンモジュールの調整
配置
ボタンカスタムスタイル
スケジュールセクションの1行目のクローンを作成します
クローン行
列1のテキストモジュールを調整します
文章
召喚状モジュールの調整
文章
バックグラウンド
テキストモジュールを調整する
文章
5.登録セクションを作成します
新しいセクションを追加
バックグラウンド
間隔
可視性
新しい行を追加
カラム構造
仕切りモジュールを追加
可視性
CSS ID
新しい行を追加
カラム構造
サイジング
カウントダウンタイマーモジュールを列1に追加
文章
バックグラウンド
タイトルテキスト
数字のテキスト
ラベルテキスト
サイジング
間隔
国境
お問い合わせフォームモジュールを列2に追加
要素
フィールドレイアウト
文章
田畑
タイトルテキスト
ボタンのカスタムスタイル
国境
カスタムCSS
padding-bottom: 30px;
プレビュー
デスクトップ
タブレット
モバイル
おしまいです