CTAが視覚的に魅力的であるほど、コンバージョン率が高くなる可能性が高くなります。 CTAを設計する方法はたくさんありますが、この記事では、半透明の画像と列のオーバーラップを備えた見事なCTA列テンプレートを作成する方法を紹介します。 下のダウンロードフォルダに半透明の画像がありますが、他の画像を自由に使用してください。 JSONファイルを無料でダウンロードすることもできます！
行こう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでどのように行ったかを簡単に見てみましょう。
作り直しましょう！
新しいセクションを追加する
コンテキスト
新しいページを作成するか、既存のページに新しい通常のセクションを追加することから始めます。 次に、設定セクションに移動し、グラデーションの背景を追加します。
- 背景：グラデーション
- グラデーションカラーグラデーション：非常に薄いグレー#efefef
- 背景色2：白#ffffff
- 勾配タイプ：放射状
- 半径方向：中心
- 開始位置：52％
- 最終ポジション：50％
スペーシング
[デザイン]タブに切り替えて、間隔設定でインフィルを調整します。
- 上下のパディング
- オフィス：0vw
- ストッキングの室内装飾品
- タブレット+電話：70vw
新しい行を追加
カラム構造
次の列構造を使用して新しい行を追加し続けます。
サイズ剤
次に、線の幅と最大幅を調整します。
- 幅：100％
- 最大幅100％
テキストモジュールを追加する
H2とテキストコンテンツを追加する
いよいよモジュールを追加します。 まず、テキストモジュールを追加し、いくつかを挿入します コンテンツ H2 と選択した段落。
テキスト
[デザイン]タブに切り替えて、次のようにテキストのスタイルを設定します。
- フォントテキスト：Open Sans
- テキストの配置：中央
- テキストの色：緑#5bba1b
- 文字サイズ
- オフィス：1.2vw
- タブレット：2.8vw
- 電話：3.6vw
- テキスト文字の間隔：0.2vw
- テキスト行の高さ：1.8em
タイトル2テキスト
段落テキストをスタイル設定した後、テキストH2もスタイル設定します。
- セクション：H2
- H2フォントの太さ：Doppio One
- H2テキストの配置：中央
- テキストの色H2：#3d3d3d
- H2テキストサイズ：
- オフィス：4.4vw
- タブレット：5.9vw
- 電話：6.9vw
スペーシング
そして、上部に小さなパディングを追加します。
- 上部パディング：212px
除算モジュールを追加する
可視
テキストモジュールの下に、分割モジュールを追加し、可視性を「はい」に設定します。
- 可視性：はい
ライン
その後、セパレータの色を変更します。
- 線の色：ダークグレー#545454
サイズ剤
次に、見た目が小さくなるようにセパレータのサイズを調整します。
- セパレーターの重量：4px
- 幅：9％
- モジュールの配置：中央
スペーシング
また、負の上マージンを追加します。
- 上マージン：
- オフィス：-40px
- タブレット+電話：-15px
新しい行を追加
カラム構造
同じサイズのXNUMXつの列を持つ新しい行を追加して続行します。 これがCTAカラムの設計の基礎になります。
コンテキスト
モジュールを追加する前に、ラインのパラメーターの背景にグラデーションを追加します。
- 背景：グラデーション
- 1の背景色のグラデーション：白#ffffff
- グラデーションの背景色2：透明
- 勾配タイプ：放射状
- ラジアルステアリングセンター
- 開始位置：42％
- 最終ポジション：50％
サイズ剤
次に、線のサイズを調整します。
- 幅：100％
- 最大幅：100％
スペーシング
次に、間隔設定に移動し、カスタムパディング値を追加します。
- 上張り：22vw
- 下部のパディング：10vw
- 左右のパディング：10vw
1列の設定
コンテキスト
1列を開き、グラデーションの背景を追加して続行します。
- 背景：グラデーション
- グラデーションの背景色：青#2a4eed
- グラデーション背景色2：ライトブルー#91f5f7
- 勾配タイプ：線形
- グラデーション方向：38deg
- 開始位置：23％
ボーダー
次に、境界線設定で列の角丸を定義します。
- 丸い角：すべての角に2vw
シャドーボックス
微妙なボックスシェードも追加します。
- ボックスシャドウ：2番目のオプション
- ボックスの影水平位置：6px
- ボックスシャドー垂直位置：-10px
- ボックスシャドーブラーフォース：50px
オーバーフロー
列のオーバーフローも表示されることを確認してください。
- 水平および垂直オーバーフロー：可視
2列の設定
コンテキスト
2列目に移動して、次のグラデーション背景を追加します。
- 背景：グラデーション
- 背景のグラデーションカラー1つ：#1ba038
- 2色の背景グラデーション：#c6f727
- 勾配タイプ：線形
- グラデーション方向：38deg
- 開始位置：23％
ボーダー
また、列に境界線の半径を追加します。
- 丸い角：四隅の2vw
シャドーボックス
微妙なボックスシェード付き。
- ボックスシャドウ：2番目のオプション
- ボックスの影水平位置：6px
- ボックスシャドー垂直位置：-10px
- ボックスシャドーブラーフォース：50px
トランスフォーマー
この列は他の列より少し高いです。 この効果を作成するために、列2の変換変換設定を調整します。
- トランスフォーマー翻訳：
- オフィス：-8vw、y軸
- タブレット+電話：30vw、Y軸
オーバーフロー
また、この列のオーバーフローを表示します。
- 水平および垂直オーバーフロー：目に見える
3列の設定
コンテキスト
最後と最後の列に移りましょう！ グラデーションの背景を追加します。
- 背景：グラデーション
- 背景色のグラデーション：#f0562c
- 2色の背景グラデーション：#f1a526
- 勾配タイプ：線形
- グラデーション方向：38deg
- 開始位置：23％
ボーダー
[デザイン]タブに切り替えて、各コーナーに境界線の半径を追加します。
- 角丸：すべての角に2vw。
シャドーボックス
ボックスシェードも追加します。
- ボックスシャドウ：2番目のオプション
- ボックスの影水平位置：6px
- ボックスシャドー垂直位置：-10px
- ボックスシャドーブラーフォース：50px
トランスフォーマー
画面サイズが小さい場合は、カスタム変換変換値を使用して列を再配置する必要があります。
- トランスフォーマー翻訳：
- タブレット+電話：60vw
オーバーフロー
最後に、オーバーフロー設定を調整します。
- 水平および垂直オーバーフロー：目に見える
イメージモジュールを追加する
切り抜きの半透明画像をインポートする
すべての列パラメーターを作成したら、モジュールを追加します。 列1に画像モジュールを追加し、選択した半透明の画像をアップロードします。 この記事の冒頭でダウンロードできたzipフォルダーに、使用した画像があります。
サイズ剤
モジュールを全幅にします。
- 全角モードに切り替え：はい
スペーシング
次に、カスタムマージンと塗りつぶしの値を追加します。
- 上マージン：
- オフィス：-11vw
- タブレット+電話：-24vw
- 左右のパディング：
- オフィス：5vw
- タブレット+電話：20vw
はしごをホバーに変えます
変換設定のスケール変換オプションを使用して、画像に微妙なホバー効果を追加します。
- ホバーでスケールを変換：両方の軸で120％。
Z-インデックス
画像が列の上部に表示されるようにするには、[詳細設定]タブでzインデックス値を増やします。
- Z-Index：1
画像モジュールを複製してドラッグする
次に、イメージモジュールのクローンをXNUMX回作成し、残りのXNUMXつの列に複製を配置します。 このプロセスは有線モードの方が簡単です。
- 画像モジュールを2回複製することから始めます
- 次に、新しい画像モジュールを2および3列にドラッグします。
- 別の画像をダウンロードする
テキストモジュールを追加する
H3コンテンツを追加
列 1 の画像の下にテキスト モジュールを追加し、いくつかのテキストを挿入します。 コンテンツ H3はお好みで。
タイトル3テキスト
[デザイン]タブに切り替えて、H3テキスト設定にスタイルを適用します。
- テキストタイトル：H3
- H3フォント：Doppio One
- H3フォントの太さ：太字
- H3アライメント：中央
- H3テキストの色：白#ffffff
- H3テキストサイズ：
- オフィス：1.8vw
- タブレット：5vw
- 電話：6vw
テキストモジュールの複製とドラッグ
テキストモジュールを2回複製し、残りの2つの列に複製を配置します。
- テキストモジュールを2回複製することから始めます。
- 次に、それらを2列目と3列目の画像モジュールの下にドラッグします。
- 変更 コンテンツ 新しいテキストモジュールごとに
テキストモジュールを追加する
コンテンツを追加する
タイトルモジュールの下に、新しいテキストモジュールを追加します。 コンテンツ領域に段落コンテンツを追加します。
テキスト
次に、次のようにテキストのスタイルを設定します。
- フォントテキスト：Open Sans
- テキストの色：白#ffffff
- 文字サイズ
- オフィス：0.6vw
- タブレット：2vw
- 電話：2.8vw
- テキスト行の高さ：2.2em
スペーシング
テキストを中央に配置するには、次のようにモジュールの間隔を調整します。
- 下マージン：
- オフィス：5vw
- タブレット+電話：10vw
- 左右のパディング
- オフィス：5vw
- タブレット+電話：14vw
テキストモジュールの複製とドラッグ
テキストモジュールを2回複製し、複製を残りの2つの列にドラッグします。
- テキストモジュールを2回複製することから始めます
- 次に、重複を列2および3に配置します
- 各複製のコンテンツを変更する
ボタンモジュールを追加する
コンテンツを追加する
最後のモジュールに行きましょう！ 選択したコピーを使用して、ボタンモジュールを1列に追加します。
リンクを追加
モジュールのリンクオプションにリンクを挿入します。
Alignement
次に、ボタンモジュールを調整します。
- 配置：中央
ボタンのスタイル
次に、次のようにボタンを呼び出します。
- ボタンテキストのサイズ：
- オフィス：1vw
- タブレット：2vw
- 電話：3vw
- ボタンのテキストの色：明るい青#2a4eed
- ボタンの背景色：白#ffffff
- ボタンの境界の半径：50vw
- ボタンフォント：ダブルワン
- フォントの太さ：太字
- ボタンの色：ブライトブルー#2a4eed
スペーシング
間隔設定にカスタムマージンとパディング値を追加して、ボタンの形状を調整し、下部にオーバーラップを作成します。
- 下マージン：
- オフィス：-1.7vw
- タブレット：-4vw
- 電話：-6vw
- 室内装飾品の上下：
- オフィス：1vw
- タブレット+電話：3vw
- 左右のパディング
- オフィス：4vw
- タブレット+電話：10vw
シャドーボックス
最後に、ボタンに微妙なボックスシェードを追加します。
- ボックスシャドウ：最初のオプション
- ボックスの水平位置の影：0px
- ボックスの垂直位置の影：2px
- ボックスシャドーブラーフォース：50px
ボタンモジュールの複製とドラッグ
前のモジュールと同様に、ボタンを2回複製し、行の残りの2列に複製を配置します。
- ボタンモジュールを2回複製する
- 重複を列2および3に配置します
ボタン2アイコンのテキストと色
列2のボタンとボタンモジュールアイコンの色を変更します。
- ボタンのテキストの色：緑＃1ba038
- アイコンの色：＃1ba038
ボタン3アイコンのテキストと色
最後の列のボタンで同じことを行うと完了です！
- ボタンのテキストの色：オレンジ#f0562c
- アイコンの色：＃f0562c
終了するには
この記事では、半透明の画像を使用して見事な CTA 列のデザインを作成する方法を紹介しました。 列のオーバーフロー設定を使用しました Divi 画像とボタンがシームレスに重なるようにします。 次のプロジェクトでこのデザインを使用してみてください Divi コメント欄でそれがどうなるか教えてください！
