Diviで効果的なCTAを使用してゲストスピーカーセクションを設計する方法

ポッドキャストを持っている場合でも、WordCamp（または任意のスピーカーイベント）をホストしている場合でも、Webサイトにゲストスピーカーセクションを用意することをお勧めします。 お客様の声のように、ゲストスピーカーを紹介することは、価値を促進し、聴衆との信頼を確立するための効果的な方法です。 ゲストスピーカーセクションは、次のイベントやエピソードの新しい候補者を巻き込むための重要な場所でもあります。 このチュートリアルでは、スピーカーをエレガントな方法で紹介するだけでなく、新しいスピーカーが効果的な行動を呼びかけることで応募することを奨励するゲストスピーカーセクションを設計する方法を示します。

しかし、私たちが飛び込む前に、ここに最終的なデザインのスニークピークがあります。

スニークピーク

そして、これがボーナスホバー効果です。これもお見せします。

始めましょう！

私たちのYoutubeチャンネルを購読する

基本的な構造とコンテンツの構築

まだ行っていない場合は、新しいページを作成し、DiviBuilderをデプロイしてフロントエンドでビルドします。

、1列の行を持つ新しいセクションを追加します。

次のコンテンツを含むテキストモジュールを行に追加します。

<h2>Guest Speaker</h2>

次に、テキストモジュールのすぐ下に仕切りモジュールを追加します。

次に、ゲストスピーカーを保持するために4列構造の新しい行を追加します。

行の最初の列に、personモジュールを追加します。

Personモジュールの内容を次のように更新します。

名前：[空白]
FacebookのプロフィールURL：[今のところ「＃」を追加]
TwitterプロフィールのURL：[今のところ「＃」を追加]
LinkedInプロファイルのURL：[今のところ「＃」を追加]

説明については、以下を追加します。

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

注：hrタグは、幅90pxで左にフロートするインラインスタイルを持つ分割線を生成します。 姓の周りに巻かれた強いタグは、ユニークなデザイン要素のためにそれを太字にします。

コンテンツが配置されたので、personモジュールの設定を保存します。

作成したpersonモジュールをコピーして残りの各列に貼り付け、4つの列のそれぞれに同じpersonモジュールを配置します。 コピーして貼り付けるには、右クリックメニューオプションまたはショートキーcmd + c cmd + v（mac）またはctrl + c ctrl + v（win）を使用できます。

列4のpersonモジュールの設定を開き、コンテンツを更新して、に以下のみが含まれるようにします。

名前：「これはあなたかもしれない！」
説明：「下のボタンを使用して、イベントでの講演を申し込んでください。」

設定を保存します。

次に、列4のpersonモジュールのすぐ下にボタンモジュールを追加し、ボタンのテキストコンテンツを「今すぐ適用」に更新します。 そして、設定を保存します。

列1〜3の最初の3人のモジュールに戻り、ゲストスピーカーのポートレートごとに画像を追加します。 それらが同じサイズで、同じ高さと幅の寸法であり、すべてのブラウザーサイズ（理想的には600px x 600px）の列幅を考慮できる十分な大きさであることを確認してください。

これは、この時点でのGuestSpeakレイアウトの外観です。

ゲストスピーカーレイアウトのスタイリング

セクションのスタイリング

セクション設定を開き、以下を更新します。

背景画像：[代理店レイアウトのものを使用しています]

背景グラデーションの左の色：＃293039
背景グラデーションの右の色：rgba（41,48,57,0.89）
トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：＃293039
トップディバイダーの高さ：30vw

行幅の変更

両方の行の幅を同じにしたいので、複数選択を使用して両方の行を選択し、設定アイコンの1つをクリックして要素設定を開きます。

次に、以下を更新します。

カスタム幅：80％

これで、両方の行のカスタム幅が同じになります。

見出しのスタイリング

セクションの見出し「GuestSpeakers」を含むテキストモジュールの設定を開き、以下を更新します。

見出し2フォント：Montserrat
見出し2フォントの太さ：太字
見出し2フォントスタイル：TT
見出し2テキストの配置：右
見出し2のテキストの色：＃74bf46
見出し2テキストサイズ：70px（デスクトップ）、50px（スマートフォン）

設定を保存する。

次に、Divider設定を開き、以下を更新します。

色：#ffffff
高さ：0px
幅：90px
モジュールの配置：右

Personモジュールのスタイリング

すべてのpersonモジュールに同じ初期スタイルを設定するため、複数選択を使用して各モジュールを選択し、いずれかのモジュールの設定アイコンをクリックして、要素設定モーダルを展開します。

次の要素設定を更新します。

アイコンの色：＃74bf46
タイトルフォント：Montserrat
タイトルフォントの太さ：軽い
タイトルテキストの色：#ffffff
タイトルテキストサイズ：20px
ボディフォント：Montserrat
本文の色：#ffffff
本文の文字間隔：2px
ボディラインの高さ：1.8em

CTAパーソンモジュールのスタイリング

この人物モジュールは、新しいゲストスピーカーを呼び込み、スピーチエンゲージメントを申請するための召喚状として使用しています。 したがって、空のスポットを表示するための創造的な方法として、デフォルトの画像（シルエット）をアクティブのままにしておくことができます。 ただし、デザインを完成させるために追加する必要のあるスタイル調整がいくつかあります。 列4のpersonモジュールの設定を開き、以下を更新します。

画像の境界線の幅：18px
画像の境界線の色：＃d2d2d2
画像の不透明度：50％

タイトルフォントの太さ：太字
タイトルラインの高さ：1.5em

あとはボタンのスタイルを設定するだけです。 ボタンモジュールの設定を開き、以下を更新します。

ボタンのテキストの色：＃293039
ボタンの背景色：＃74bf46
ボタンの境界線半径：50px
ボタンフォント：Montserrat
フォントの太さ：太字

それでは、最終結果を見てみましょう。

ボーナスのヒント：画像ズームホバー効果

Diviで利用可能なすべての組み込みホバーオプションを忘れないでください。 実際、これらのホバー効果に関するいくつかの刺激的なチュートリアルをブログで見ることができます。 しかし、このデザインでは、ボックスの外側を少し考えて、ホバー時に人物の画像をわずかにズーム（または拡大縮小）するCSSのスニペットをいくつか提供すると思いました。

人物モジュールを際立たせるための微妙なホバー効果を探している場合は、次の方法で行います。

複数選択を使用して、列1、2、および3の個人モジュールを選択します。要素設定を開きます。 [詳細設定]タブで、[メイン要素]の下に次のCSSを入力します。

overflow: hidden;

このコードは、展開するイメージがモジュールコンテナの外側に拡張するのを防ぎます。

次に、メンバーイメージの下に次のCSSを追加します。

transition: all 0.3s; 

これにより、画像のサイズが拡大縮小されたときにスムーズな遷移が追加されます。

ホバーにCSSを追加するには、ホバーアイコンをクリックし、ホバータブを選択して、次のCSSを入力します。

transform: scale(1.1) translateY(-4.5%);

これにより、画像が少し大きいサイズに拡大縮小（または拡大）され、少し上に移動します。

これで、画像はホバー時に微妙なズーム効果を発揮します。

最終的な考え

さて、あなたがこのチュートリアルを楽しんだか、少なくともいくつかの有用な設計のヒントを残したことを願っています。 このゲストスピーカーセクションのレイアウトは、さまざまな方法で使用できます。 もう1つの完璧なアプリケーションは、従業員ページに現在の従業員を同時に一覧表示し、他の人に求人への応募を促すことです。 いくつかのアイデアを私たちと自由に共有してください。

以下のコメントであなたからの連絡を楽しみにしています。

乾杯！